📦 Installation

To use listing-rez-test-1, install it along with its peer dependencies:

npm install listing-rez-test-1 @tanstack/react-table

Craft Table

listing-rez-test-1 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

listing-rez-test-1 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)

🛠 Usage

Here’s an example of how to use listing-rez-test-1:

import TableWrapper from 'listing-rez-test-1';

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() {
  return (
    <TableWrapper
      data={newData}
      columns={defaultColumns}
      featureOptions={{
        striped: true,
        enableColumnReordering: true,
        enableColumnPinning: true,
      }}
      loadingOptions={{
        isLoading: false,
        loaderText: "Loading...",
      }}
    />
  );
}

🔧 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. | | featureOptions | CraftTableFeatureProps | Object containing feature flags for enabling/disabling specific functionalities. | | loadingOptions | LoadingOptions | Object for controlling loading behavior. |

CraftTableFeatureProps

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

📘 Documentation

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