craft-table-listing v1.0.6

📦 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

CraftTableFeatureProps

LoadingOptions

📘 Documentation

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