React Tanstack Data Table

Modern, customizable, and flexible React table component. Supports sorting, filtering, pagination, and column visibility features.

Features

• 🔍 Sorting and filtering
• 📊 Pagination
• 🎨 Styling with Tailwind CSS
• 🧩 Fully customizable
• 📱 Responsive design
• 🌐 TypeScript support

Installation

npm install @bilalsino/react-tanstack-data-table
# or
yarn add @bilalsino/react-tanstack-data-table
# or
pnpm add @bilalsino/react-tanstack-data-table

Tailwind CSS Configuration

This package is built with Tailwind CSS v4. To ensure styles work correctly in your project:

1. Make sure you have Tailwind CSS v4 installed:

npm install tailwindcss@latest postcss@latest

2. Import the package's CSS in your main CSS file:

@import "@bilalsino/react-tanstack-data-table/dist/index.css";

3. If you are not seeing styles, add our package to your Tailwind content configuration:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Your existing content paths...
    "./node_modules/@bilalsino/react-tanstack-data-table/dist/**/*.{js,ts,jsx,tsx}"
  ],
  // rest of your config...
}

Dependencies

This package requires the following packages as peer dependencies:

npm install @radix-ui/react-checkbox @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slot @tanstack/react-table @tanstack/react-virtual class-variance-authority clsx date-fns lucide-react motion react react-day-picker react-dom react-number-format tailwind-merge tailwindcss tw-animate-css zustand

Exports

This package exports the following components, types, and utilities:

Components

• CustomTable - The main table component
• Pagination - Standalone pagination component (can be used independently)

Types

• From @tanstack/react-table: ColumnDef, ColumnFiltersState, SortingState, VisibilityState, Table, PaginationState
• CustomTableProps - Type definition for the CustomTable component props
• CalendarProps - Type definition for calendar related props

Utilities

• cn - Utility function for merging Tailwind CSS classes

Usage

import React from 'react';
import { CustomTable, ColumnDef } from '@bilalsino/react-tanstack-data-table';

// Data type definition
type Person = {
  id: string;
  name: string;
  email: string;
  age: number;
};

// Data
const data: Person[] = [
  {
    id: '1',
    name: 'John Doe',
    email: '[email protected]',
    age: 28,
  },
  // ... other data
];

// Column definitions
const columns: ColumnDef<Person>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  {
    accessorKey: 'age',
    header: 'Age',
  },
];

export default function App() {
  return (
    <div className="container mx-auto py-10">
      <CustomTable
        tableId="person-table"
        columns={columns}
        rows={{
          data: data,
          // Optional: provide rowCount if you know the total number of rows
          // rowCount: 100,
          // Optional: provide pageCount if you know the total number of pages
          // pageCount: 10
        }}
      />
    </div>
  );
}

Props

CustomTable

| Prop | Type | Default | Description | | ---- | --- | ---------- | -------- | | tableId | string | required | Unique ID for the table | | columns | ColumnDef<TData, TValue>[] | required | Column definitions for the table | | rows | { data: TData[], rowCount?: number, pageCount?: number } | required | Table data, total row count and page count | | defaultPageSize | number | 10 | Default number of rows per page | | manualPagination | boolean | false | Whether pagination is handled manually | | customPagination | boolean \| function | false | Custom pagination component or function | | defaultPinnedColumns | { left?: string[], right?: string[] } | - | Default pinned columns configuration | | cardComponent | React.ReactNode \| function | - | Card component for card view mode | | bulkActions | React.ReactNode \| function | - | Bulk actions component or function | | manualSearch | boolean | false | Whether search is handled manually | | rightTop | React.ReactNode \| function | - | Component to render at the top right | | leftTop | React.ReactNode \| function | - | Component to render at the top left | | viewMode | "table" \| "card" | "table" | View mode of the table | | pageOffset | number | 15.5 | Page offset for scrollable table | | scrollable | boolean | true | Whether the table is scrollable | | isLoading | boolean | false | Whether the table is in loading state | | defaultSorting | SortingState | - | Default sorting configuration | | maxHeight | string \| number | - | Maximum height of the table | | minHeight | string \| number | - | Minimum height of the table |

Advanced Usage Examples

Using the Standalone Pagination Component

import React, { useState } from 'react';
import { Pagination, PaginationState } from '@bilalsino/react-tanstack-data-table';

function CustomPaginationExample() {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10
  });
  
  const rows = {
    data: [...],
    rowCount: 100,
    pageCount: 10
  };
  
  return (
    <Pagination
      rows={rows}
      pagination={pagination}
      setPagination={setPagination}
      // You'll need to pass your table instance in actual usage
    />
  );
}

License

MIT