@tjernstad-utvikling/table

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