Get started

@h6s/table is module for creating complex table UI

Install

yarn

yarn add @h6s/table

npm

npm install --save @h6s/table

Build Table

Source

interface Product {
  id: number;
  product: {
    name: string;
    price: number;
  };
  createdAt: string;
}

Define Model

const model: TableModel<Product> = [
  {
    accessor: 'id', // <- keyof Product
    label: 'Id', // <- whatever
  },
  {
    accessor: 'product.name',
    label: 'Name',
  },
  {
    accessor: 'product.price',
    label: 'Price',
  },
  {
    accessor: 'createdAt',
    label: 'Created Date',
  },
]

Get Table Instance

useTable hooks are the most important functions and everything in Table. These hooks return almost everything you need to construct a table.

import { useTable } from '@h6s/table'

const [instance, controls] = useTable({
  model: model,
  source: products,
})

• instance: serve data for building table UI.

type TableInstance<Row> = {
  theadGroups: Array<{
    getRowProps: () => RowProps;
    theads: Array<THead<Row>>;
  }>;
  rows: Array<{
    getRowProps: () => RowProps;
    cells: Array<Cell<Row>>;
  }>;
  tfoots: Array<TFoot<Row>> | null;

  headMeta: HeadMeta;
  selectableHeadIds: HeadId<Row>[]
  visibleHeadIds: HeadId<Row>[]
}

• controls: serve interface to control table.

type TableControls = {
  updateHead: (headIds?: Array<HeadId<Row>>) => void;
}

Build UI with anything

You can use anything UI frameworks (like Chakra UI, MUI, etc ...)

import { useTable } from '@h6s/table'

export default function Table() {
  const [{ theadGroups, rows }, controls] = useTable({
    model: myTableModel,
    source: products,
  })

  return (
    <table>
      <thead>
        {theadGroups.map(({ theads, getRowProps }) => {
          const props = getRowProps()

          return (
            <tr key={props.id} {...props}>
              {theads.map(head => (
                <th>{head.render({ cellProps: head })}</th>
              ))}
            </tr>
          )
        })}
      </thead>
      <tbody>
        {rows.map(({ cells, getRowProps }) => {
          const props = getRowProps()

          return (
            <tr key={props.id} {...props}>
              {cells.map(cell => (
                cell.colSpan !== 0
                  ? <td key={cell.id}>{cell.render({ cellProps: cell })}</td>
                  : null
              )}
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}

This is all you need to do to draw a complex table.