xs-react-table

A small, simple and headless UI react table. It's up to you to define the shape, attributes, eventlisteners, styles, ... of every single element of your table.

Installation

  npm i xs-react-table

  yarn add xs-react-table

  import { Table } from 'xs-react-table'

Demo

Code Sandbox

Basic Usage

Define thead, tbody and tfoot using this basic skeleton:

  {
    tr: {
      rows: [
        {
          td: {
            cols: [
              {
                content: "Your Text Here",
              }
            ]
          }
        },
      ]
    }
  }

Example:

  const head = {
    tr: {
      rows: [
        {
          td: {
            cols: [
              {
                content: "First Name",
              },
              {
                content: "Last Name",
              },
            ]
          }
        },
      ]
    }
  }


  const body = {
    tr: {
      rows: [
        {
          td: {
            cols: [
              {
                content: "John",
              },
              {
                content: "Doe",
              },
            ]
          }
        },
        {
          td: {
            cols: [
              {
                content: "Jane",
              },
              {
                content: "Doe",
              },
            ]
          }
        },
      ]
    }
  }


  const foot = {
    tr: {
      rows: [
        {
          td: {
            cols: [
              {
                content: "Whatever",
              },
              {
                content: "You",
              },
              {
                content: "Like",
              },
            ]
          }
        }
      ]
    }
  }

Pass them to <Table> component

  <Table head={head} body={body} foot={foot} />

Extra fields

will be updated

Author

👤 Truong Nguyen

• Github: @icerockartic

📝 License

Copyright © 2021 Truong Nguyen.
This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator