@tjernstad-utvikling/table
TypeScript icon, indicating that this package has built-in type declarations

0.1.12 • Public • Published

Table

This is a opinionated implementation of Tanstack table with Material UI table style.

Built with Material UI V5 and TanStack Table V8

Get Started

type Columns = {
  id: number;
  name: string;
  email: string;
  phone: string;
  isLocked: boolean;
};

const columns: ColumnDef<Columns>[] = useMemo(
() => [
    {
    header: "#",
    accessorKey: "id",
    enableGrouping: false,
    },
    {
    header: "Name",
    accessorKey: "name",
    enableGrouping: false,
    },
    {
    header: "Email",
    accessorKey: "email",
    enableGrouping: false,
    },
    {
    header: "Locked User",
    accessorKey: "isLocked",
    cell: ({ cell }) => <StatusCell isLocked={cell.getValue<boolean>()} />,
    },
],
[]
);

const [tableState, setTableState] = useState<TableState>({
columnVisibility: {},
expanded: {},
pagination: { pageIndex: 0, pageSize: 20 },
} as TableState);


<TuTable<Columns>
    columns={columns}
    data={data}
    isLoading={isLoading}
    setTableState={setTableState}
    tableState={tableState}
    enableSelection
    selectedIds={selected}
    setSelected={updateSelected}
    enablePagination
/>

Features

  • sorting
  • Column filter
  • Global filter
  • Pagination
  • Hide columns
  • Selection and range selection
  • Preserve table state

Locales

  • Norwegian

Package Sidebar

Install

npm i @tjernstad-utvikling/table

Weekly Downloads

3

Version

0.1.12

License

MIT

Unpacked Size

234 kB

Total Files

44

Last publish

Collaborators

  • ole-tjernstad