Rez-craft-table NPM

📦 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)

🛠 Usage

Here’s an example of how to use craft-table:

import TableWrapper from 'craft-table';

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.

table tanstack react data-table

@dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable @dnd-kit/utilities @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-terser @tanstack/react-table rollup rollup-plugin-dts rollup-plugin-peer-deps-external

1.0.0

6 months ago