@front.zen/table v3.4.3
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 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
š¤ 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.
7 months ago
8 months ago
9 months ago
10 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago