Frontzen Table provides React UI components based on MUI and @tanstack/react-table. Click HERE to see the storybooks.

📦 Install

npm install @front.zen/table

yarn add @front.zen/table

🔨 Usage

Basic

import { DataTable } from '@front.zen/table';
import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table';

interface Entity {
  id: number;
}

const helper = createColumnHelper<Entity>();

const columns = [
  helper.accessor((row) => row.id, {
    id: 'index',
    header: `id`,
    cell: (props) => <p>{props.renderValue()}</p>,
  }),
];

const data: Entity[] = Array<Entity>(10).fill({
  id: 1,
});

const App = () => {
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    enableRowSelection: false,
  });

  return <DataTable instance={table} />;
};

Pagination, Filter, Select, Sorting

import { DataFilter, DataPagination, DataTable } from '@front.zen/table';
import {
  ColumnFiltersState,
  PaginationState,
  SortingState,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';

interface Entity {
  id: number;
}

const helper = createColumnHelper<Entity>();

const columns = [
  helper.accessor((row) => row.id, {
    id: 'index',
    header: `id`,
    cell: (props) => <p>{props.renderValue()}</p>,
    filter: ({ column }) => (
      <input name={column.id} value={column.getFilterValue()} onChange={(e) => column.setFilterValue(e.target.value)} />
    ),
  }),
];

const data: Entity[] = Array<Entity>(10).fill({
  id: 1,
});

const App = () => {
  const [filters, setFilters] = useState<ColumnFiltersState>([]);
  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 10 });
  const [sorting, setSorting] = useState<SortingState>([]);

  const table = useReactTable({
    state: { columnFilters: filters, pagination, sorting, rowSelection },
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    onColumnFiltersChange: setFilters,
    onSortingChange: setSorting,
    onPaginationChange: setPagination,
    manualPagination: true,
    getRowCanExpand: () => true,
    enableRowSelection: true,
    onRowSelectionChange: setRowSelection,
  });

  return (
    <>
      <DataTable instance={table} renderRowDetails={(row) => <p>I expanded</p>} />
      <DataPagination instance={table} />
      <DataFilter instance={table} />
    </>
  );
};

Active Row hook

import { DataTable } from '@front.zen/table';
import { table } from './yourInstance';

const App = () => {
  const { getRowProps, activeRow, clearActiveRow } = useActiveRow<Entity>();

  return (
    <>
      <DataTable
        instance={table}
        getRowExtraProps={(row) => ({
          ...getRowProps(row),
        })}
      />
      {activeRow && <p>{activeRow.id}</p>}
    </>
  );
};

⌨️ Development

This repo is powered by TurboRepo. You can use TurboRepo commands to work with this repo.

To run all storybooks locally:

$ git clone [email protected]:frontzen/design-system.git
$ cd design-system
$ cd table
$ yarn install
$ yarn storybook

You can also use chromatic for UI review. link

🤝 Contributing

We welcome contributions to Frontzen design system! Development of design system happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements.

📥 Pull requests and 🌟 Stars are always welcome.