npm package: @front.zen/table
Description: <h1 align="center" >Frontzen Table</h1>
Latest version: 3.4.3

<h1 align="center" >Frontzen Table</h1>

Frontzen Table provides React UI components based on [MUI](https://mui.com) and [@tanstack/react-table](https://tanstack.com/table/v8). Click [HERE](https://63735b95ebfbcb4de6ddaa4d-dqcakcspwn.chromatic.com) to see the storybooks.

## 📦 Install

```bash
npm install @front.zen/table
```

```bash
yarn add @front.zen/table
```

## 🔨 Usage

### Basic

```tsx
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

```tsx
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

```tsx
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](https://turbo.build/repo). You can use TurboRepo commands to work with this repo.

To run all storybooks locally:

```bash
$ git clone git@github.com:frontzen/design-system.git
$ cd design-system
$ cd table
$ yarn install
$ yarn storybook
```

You can also use chromatic for UI review. [link](https://www.chromatic.com/builds?appId=62d39f56a426a9878a3e1f3d)

## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

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](https://github.com/frontzen/design-system/pulls) and 🌟 Stars are always welcome.