📦 Installation

To use craft-table, install it along with its peer dependencies:

npm install craft-table @tanstack/react-table

Craft Table

Craft-table 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

Craft-table 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 craft-table:

import {TableWrapper} from 'craft-table-listing';

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}
        paginationOptions = {{
          paginationPosition: "top",
          paginationView: "compact",
        }}
        featureOptions={{
          striped: true,
          enableColumnReordering: true,
          enableColumnPinning: true,
        }}
        loadingOptions={{
          isLoading: mockLoading,
          loaderText: "Loading, Please wait...",
          loadingComponent: <div>Custom Loading...</div>,
        }}
        topbarOptions={{
          leftSideComponent: <h4>Craft Table</h4>,
          rightSideComponent: <span>Right Side</span>,
          showFullscreenToggle: false,
          showColumnToggle: false,
          showCompactTableToggle: false,
        }}
    />
  );
}

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

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

PaginationOptions

| Option | Type | Options | Description | | -------------------- | ------ | ------------------- | --------------------------------- | | paginationPosition | string | "top" or "bottom" | Position of pagination component. | | paginationView | string | "full" or "compact" | View of pagination component. |

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.