@bilalsino/react-tanstack-data-table NPM

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:

Make sure you have Tailwind CSS v4 installed:

npm install tailwindcss@latest postcss@latest

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

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

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: 'john@example.com',
    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
    />
  );
}