https://github.com/shakibdshy/react-tablegrid
A flexible and feature-rich table grid component for React applications with TailwindCSS support.
https://github.com/shakibdshy/react-tablegrid
data-grid data-grid-view enterpise-table grid-table pinned-columns react-table-component react-table-grid sortable-table tailwind-component tailwind-table-grid tailwindcss
Last synced: 4 months ago
JSON representation
A flexible and feature-rich table grid component for React applications with TailwindCSS support.
- Host: GitHub
- URL: https://github.com/shakibdshy/react-tablegrid
- Owner: shakibdshy
- Created: 2024-12-25T09:18:25.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-21T13:26:57.000Z (11 months ago)
- Last Synced: 2025-09-20T10:59:40.547Z (4 months ago)
- Topics: data-grid, data-grid-view, enterpise-table, grid-table, pinned-columns, react-table-component, react-table-grid, sortable-table, tailwind-component, tailwind-table-grid, tailwindcss
- Language: TypeScript
- Homepage: https://react-tablegrid.vercel.app
- Size: 447 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Table Grid
A powerful and flexible table grid component for React applications with TailwindCSS support. Built with TypeScript and modern React patterns.
[](https://www.npmjs.com/package/@shakibdshy/react-tablegrid)
[](https://www.npmjs.com/package/@shakibdshy/react-tablegrid)
[](https://github.com/shakibdshy/react-tablegrid/blob/main/LICENSE)
## Demo & Documentation (Updated)
[Demo](https://react-packages-doc.vercel.app/docs/react-tablegrid)
## Installation
```bash
# Install with npm
npm install @shakibdshy/react-tablegrid
# Or with yarn
yarn add @shakibdshy/react-tablegrid
# Or with pnpm
pnpm add @shakibdshy/react-tablegrid
```
### Import the CSS styles
```tsx
// Method 1: Import styles
import '@shakibdshy/react-tablegrid/styles';
// OR Method 2: Import CSS file directly
import '@shakibdshy/react-tablegrid/dist/table-grid.css';
```
## Setup
```tsx
/** @type {import('tailwindcss').Config} */
export default {
content: [
// ... your content configuration
"node_modules/@shakibdshy/react-tablegrid/dist/**/*.{js,ts,jsx,tsx}",
],
};
```
## Features
- 🔄 Dynamic Sorting & Server-side Sorting
- 🔍 Advanced Filtering with Fuzzy Search
- 📌 Column Pinning (Left/Right)
- 📏 Column Resizing with Drag & Drop
- 👥 Header Groups & Nested Headers
- 🎨 Custom Cell & Header Rendering
- 🎯 Full TypeScript Support
- 💅 TailwindCSS Integration
- 📱 Responsive Design
- ⚡ Virtualization Support for Large Datasets
- 🎛️ Customizable Components & Styling
- 🎨 Multiple Style Variants
- 🔄 Column Visibility Toggle
- 📍 Dynamic Column Pinning
- 🔄 Row Selection & Bulk Actions
- 📊 Row Grouping
- 🔍 Advanced Search with Multiple Fields
- 💾 Persistent State Management
- 🔄 Server-side Pagination
- 📱 Touch & Mobile Support
## Basic Usage
```tsx
type DataItem = {
id: number;
name: string;
age: number;
email: string;
};
const columnHelper = createColumnHelper();
const columns: Column[] = [
columnHelper.accessor("name", {
header: "Name",
sortable: false,
}),
columnHelper.accessor("age", {
header: "Age",
sortable: false,
}),
columnHelper.accessor("email", {
header: "Email",
sortable: false,
}),
];
const BasicTable = () => {
return (
{
console.log("Table state changed:", state);
}}
/>
);
};
export default BasicTable;
```
## API Reference
### TableProps
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `columns` | `Column[]` | Required | Array of column definitions |
| `data` | `T[]` | Required | Array of data objects |
| `variant` | `"modern" \| "minimal" \| "classic"` | `"modern"` | Table style variant |
| `enableFiltering` | `boolean` | `false` | Enable basic filtering |
| `enableFuzzySearch` | `boolean` | `false` | Enable fuzzy search |
| `fuzzySearchKeys` | `Array` | All columns | Keys to include in fuzzy search |
| `fuzzySearchThreshold` | `number` | `0.3` | Fuzzy search sensitivity |
| `maxHeight` | `string` | `"400px"` | Maximum height of table |
| `gridTemplateColumns` | `string` | `"1fr"` | CSS grid template columns |
| `headerGroups` | `boolean` | `false` | Enable header grouping |
| `isLoading` | `boolean` | `false` | Show loading state |
| `serverSideConfig` | `ServerSideConfig` | - | Server-side data handling configuration |
| `virtualizationConfig` | `VirtualizationConfig` | - | Configuration for virtualization |
| `enableRowSelection` | `boolean` | `false` | Enable row selection |
| `enableRowGrouping` | `boolean` | `false` | Enable row grouping |
| `persistState` | `boolean` | `false` | Enable state persistence |
| `stateKey` | `string` | - | Key for persisting state |
| `onBulkAction` | `(selectedRows: T[]) => void` | - | Handler for bulk actions |
| `touchConfig` | `TouchConfig` | - | Touch interaction configuration |
### Column Definition
```tsx
interface Column {
id: keyof T;
header: ReactNode | (() => ReactNode);
accessorKey: keyof T;
sortable?: boolean;
className?: string;
width?: string;
group?: string;
pinned?: 'left' | 'right' | false;
groupable?: boolean;
nestedHeaders?: Column[];
cell?: (props: {
value: T[keyof T];
row: T;
onChange?: (value: T[keyof T]) => void;
onDelete?: () => void;
}) => ReactNode;
}
```
### Server-Side Configuration
```tsx
interface ServerSideConfig {
enabled: boolean;
totalRows: number;
pageSize: number;
onFetch: (params: {
page: number;
sortBy?: string;
sortDirection?: 'asc' | 'desc';
filters?: Record;
}) => Promise;
}
```
### Virtualization Configuration
```tsx
interface VirtualizationConfig {
enabled: boolean;
rowHeight: number;
overscan?: number;
scrollThreshold?: number;
}
```
### Touch Configuration
```tsx
interface TouchConfig {
enabled: boolean;
swipeThreshold?: number;
longPressDelay?: number;
dragEnabled?: boolean;
}
```
### Style Configuration
```tsx
interface TableStyleConfig {
container?: {
className?: string;
style?: React.CSSProperties;
wrapperClassName?: string;
scrollContainerClassName?: string;
tableClassName?: string;
};
header?: {
className?: string;
style?: React.CSSProperties;
headerRowClassName?: string;
headerCellClassName?: string;
headerGroupClassName?: string;
};
body?: {
style?: React.CSSProperties;
className?: string;
rowClassName?: string;
cellClassName?: string;
};
resizer?: {
className?: string;
style?: React.CSSProperties;
};
resizerIndicator?: {
className?: string;
style?: React.CSSProperties;
};
sortButton?: {
className?: string;
style?: React.CSSProperties;
};
utilityStyles?: {
emptyClassName?: string;
searchContainerClassName?: string;
searchInputClassName?: string;
loadingClassName?: string;
style?: React.CSSProperties;
};
}
```
### Additional Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `columnResizeMode` | `"onChange" \| "onResize" \| "drag"` | `"onChange"` | When to update column sizes |
| `onColumnResize` | `(columnId: string, width: number) => void` | - | Column resize handler |
| `columnSizing` | `{ columnSizes: { [key: string]: number } }` | - | Column width states |
| `onColumnPin` | `(columnId: keyof T, position: 'left' \| 'right' \| false) => void` | - | Column pin handler |
| `onStateChange` | `(state: TableState) => void` | - | Table state change handler |
| `onRowSelect` | `(selectedRows: T[]) => void` | - | Row selection handler |
| `onGroupChange` | `(groups: string[]) => void` | - | Row grouping change handler |
## Version History
- v2.1.0 - Enhance table component styling and customization
- Added new className and style props for more granular styling control
- Introduced rtg-* class names for better semantic targeting
- Updated TableStyleConfig to support more detailed styling options
- Improved hover and transition effects across table components
- Added support for custom row and cell styling in table body
- v2.0.0 - Major Release
- Added server-side data handling
- Enhanced virtualization for large datasets
- Improved column management with drag & drop
- Added row grouping functionality
- Enhanced TypeScript support
- Added persistent state management
- Improved mobile & touch support
- Added bulk actions for selected rows
- Enhanced search capabilities
- Added nested header groups
- Performance optimizations
- v1.2.0-beta.1 - Added column resizing and toggle column pinning features
- v1.1.0 - Initial stable release
- v1.0.0 - Initial release
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT © [Md. Habibur Rahman]