A rez table listing component built on TanStack Table
npm install rez-table-listing-muirez-table-listing, install it along with its peer dependencies:
bash
npm install craft-table @tanstack/react-table
`
Rez Table Listing
Rez-table-listing is a highly customizable React table component built on top of TanStack Table. It provides powerful table functionality with features for server-side processing, column management, and additional UI enhancements.
We highly recommend providing a max-height in your CSS for the class ts__table__wrapper, tailored to your requirements, to ensure the best experience.
π Features
rez-table-listing supports a wide range of features out of the box:
$3
- Striped layout
- Compact mode
- Custom Nested Component.
- In-built default loader as well as custom loader option.
- Custom hook that provides all the states of table, for e.g. pagination page size (useCraftTable).
- Fullscreen mode to focus only on Table contents.
- Word break all for table content.
- Column content alignment.
#### TanStack Table Features
- Sorting
- Server Side Sorting
- Pagination
- Server Side Pagination
- Column Reordering (Drag and Drop)
- Column Sizing
- Column Resizing
- Column Pinning
- Row Selection
- Toggle column on and off (required Topbar)
- Hierarchical
π Usage
Hereβs an example of how to use rez-table-listing:
`import React from 'react';
import {TableWrapper,useCraftTable,CraftTableTabs} from 'rez-table-listing-mui';
const newData = [
{ id: 1, name: 'John Doe', age: 28 },
{ id: 2, name: 'Jane Doe', age: 34 },
];
const defaultColumns = [
{ accessorKey: 'id', header: 'ID' },
{ accessorKey: 'name', header: 'Name' },
{ accessorKey: 'age', header: 'Age' },
];
export default function App() {
const tableStates = useCraftTable();
return (
data={newData}
columns={defaultColumns}
tableStates={tableStates}
topbarOptions={{
leftSideComponent: (
data={data}
onClick={(e) => {
setActiveTab(e);
}}
/>
),
rightSideComponent: Right Side,
}}
featureOptions={{
striped: true,
enableColumnReordering: true,
enableColumnPinning: true,
}}
loadingOptions={{
isLoading: mockLoading,
loaderText: "Loading, Please wait...",
loadingComponent: Custom Loading...,
}}
paginationOptions = {{
showPagination: true,
paginationPosition: "top",
paginationView: "compact",
}}
/>
);
}
`
π§ API Reference
$3
#### Props
| Prop | Type | Description |
| ------------------- | ---------------------- | -------------------------------------------------------------------------------- |
| data | Array | The data to be displayed in the table. |
| columns | Array | Column definitions, compatible with TanStack Table. |
| tableStates | TableStates | Object containing table states. |
| featureOptions | CraftTableFeatureProps | Object containing feature flags for enabling/disabling specific functionalities. |
| loadingOptions | LoadingOptions | Object for controlling loading behavior. |
| paginationOptions | PaginationOptions | Object for configuring pagination options. |
| topbarOptions | TopbarOptions | Object for configuring topbar options. |
---
$3
| Feature | Type | Default | Description |
| ---------------------------- | ------- | ------- | ---------------------------------------------------------- |
| enableSorting | boolean | true | Enables client-side sorting. |
| enableServerSideSorting | boolean | false | Enables server-side sorting. |
| enableServerSidePagination | boolean | false | Enables server-side pagination. |
| enableRowSelection | boolean | true | Enables row selection functionality. |
| enableColumnResizing | boolean | true | Allows columns to be resized by dragging. |
| enableColumnReordering | boolean | false | Allows columns to be reordered via drag-and-drop. |
| enableColumnPinning | boolean | false | Enables pinning columns to the left or right of the table. |
| enableTopbar | boolean | true | Enables a custom topbar for the table. |
| enableWordBreakAll | boolean | false | Applies word-break: break-all to prevent text overflow. |
| stickyHeader | boolean | true | Makes the table header sticky when scrolling vertically. |
| compactTable | boolean | false | Reduces row height for a compact layout. |
| striped | boolean | false | Adds striped row styling for better readability. |
---
$3
| Option | Type | Default | Description |
| ------------------ | --------- | ------------ | ---------------------------------------- |
| isLoading | boolean | false | Whether the table is in a loading state. |
| loaderText | string | "Loading..." | Text to display when loading. |
| loadingComponent | ReactNode | undefined | Custom loading component to render. |
$3
| Option | Type | Options | Description |
| -------------------- | ------- | ------------------- | --------------------------------- |
| paginationPosition | string | "top" or "bottom" | Position of pagination component. |
| paginationView | string | "full" or "compact" | View of pagination component. |
| showPagination | boolean | true or false | Whether to show pagination. |
$3
| Option | Type | Options | Description |
| ------------------------ | --------- | --------- | ------------------------------------------------------- |
| leftSideComponent | ReactNode | ReactNode | Component to display on the left side of the topbar. |
| rightSideComponent | ReactNode | ReactNode | Component to display on the right side of the topbar. |
| showFullscreenToggle | boolean | true | Whether to show the fullscreen toggle in the topbar. |
| showColumnToggle | boolean | true | Whether to show the column toggle in the topbar. |
| showCompactTableToggle` | boolean | true | Whether to show the compact table toggle in the topbar. |