@bilalsino/react-tanstack-data-table/README.md

Reusable React data table component with sorting, filtering, and pagination

# 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

```bash
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:
```bash
npm install tailwindcss@latest postcss@latest
```

2. Import the package's CSS in your main CSS file:
```css
@import "@bilalsino/react-tanstack-data-table/dist/index.css";
```

3. If you are not seeing styles, add our package to your Tailwind content configuration:
```js
// 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:

```bash
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

```tsx
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

```tsx
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