rez-table-listing-mui/README.md

A rez table listing component built on TanStack Table

## 📦 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](https://tanstack.com/table/latest). 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:

### Core Features

- 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 (
    <TableWrapper
        data={newData}
        columns={defaultColumns}
        tableStates={tableStates}
        topbarOptions={{
          leftSideComponent: (
            <CraftTableTabs
              data={data}
              onClick={(e) => {
                setActiveTab(e);
              }}
            />
          ),
          rightSideComponent: <span>Right Side</span>,
        }}
        featureOptions={{
          striped: true,
          enableColumnReordering: true,
          enableColumnPinning: true,
        }}
        loadingOptions={{
          isLoading: mockLoading,
          loaderText: "Loading, Please wait...",
          loadingComponent: <div>Custom Loading...</div>,
        }}
         paginationOptions = {{
          showPagination: true,
          paginationPosition: "top",
          paginationView: "compact",
        }}

    />
  );
}
```

## 🔧 API Reference

### CraftTable

#### 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.                                           |

---

### RezTableFeatureProps

| 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.           |

---

### LoadingOptions

| 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.      |

### PaginationOptions

| 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.       |

### TopbarOptions

| 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](https://tanstack.com/table/latest/docs/introduction).