rez-table-listing-mui

📦 Installation

To use rez-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. |

📘 Documentation

For detailed documentation and examples, visit the TanStack Table Docs.