Professional-grade React DataTable component with enterprise features including hierarchical grouping, pinned columns, inline editing, virtual scrolling, and comprehensive data management capabilities.

• 📊 Advanced Data Management: Sort, filter, group, and paginate large datasets
• 🔒 Type Safety: Full TypeScript support with customizable column definitions
• 📱 Responsive Design: Mobile-friendly with horizontal scrolling and adaptive layouts
• ⚡ Performance: Virtual scrolling for handling thousands of rows efficiently

• 🏷️ Multi-Level Grouping: Hierarchical grouping with drag-and-drop reordering
• 📌 Column Pinning: Pin important columns to left/right with proper shadows
• ✏️ Inline Editing: Double-click cells to edit with type-specific editors
• 🔍 Smart Filtering: Multiselect filters for select and boolean columns
• 📤 Export Capabilities: CSV export with optional PDF support
• 🎯 Row Selection: Single/multiple selection with checkbox support
• 📋 Column Management: Show/hide, reorder, and configure columns dynamically

• 📈 Aggregation Functions: Built-in summaries (count, sum, avg, min, max)
• 🎨 Custom Renderers: Override cell, header, and footer templates
• 🔧 Sticky Elements: Configurable sticky headers and footers
• 📊 Custom Actions: Extensible action bar with custom components
• 🌐 Internationalization: Ready for i18n with customizable text

npm install advanced-react-datatable
# or
yarn add advanced-react-datatable
# or
pnpm add advanced-react-datatable

import React from 'react';
import { DataTable, DataTableColumn } from 'advanced-react-datatable';

interface Employee {
  id: number;
  name: string;
  department: string;
  salary: number;
  active: boolean;
}

const employees: Employee[] = [
  { id: 1, name: 'John Doe', department: 'Engineering', salary: 85000, active: true },
  { id: 2, name: 'Jane Smith', department: 'Marketing', salary: 72000, active: true }
];

const columns: DataTableColumn<Employee>[] = [
  { field: 'name', header: 'Name', sortable: true, filterable: true },
  { field: 'department', header: 'Department', groupable: true },
  { field: 'salary', header: 'Salary', type: 'number', sortable: true, aggregation: 'sum' },
  { field: 'active', header: 'Active', type: 'boolean', filterable: true }
];

function App() {
  return (
    <DataTable
      data={employees}
      columns={columns}
      showFilters={true}
      showColumnConfig={true}
      virtualScrolling={true}
      stickyHeader={true}
    />
  );
}

Explore the full capabilities of Advanced React DataTable through these comprehensive examples:

• Features: Basic table with sorting, filtering, and pagination
• Use Case: Simple data display with essential functionality
• Code: View Demo Code

• Features: Multi-level grouping with automatic summaries
• Use Case: Financial reports, sales analytics, data analysis
• Code: View Demo Code

• Features: Left/right pinned columns with proper shadows
• Use Case: Wide tables with important identifier columns
• Code: View Demo Code

• Features: Cell editing with validation and type-specific editors
• Use Case: Admin panels, data entry forms, spreadsheet-like interfaces
• Code: View Demo Code

• Features: Complex filters, date ranges, numeric comparisons
• Use Case: Data exploration, reporting dashboards, search interfaces
• Code: View Demo Code

• Features: Performance optimization for large datasets
• Use Case: Big data applications, real-time monitoring, analytics
• Code: View Demo Code

• Features: Custom cell, header, and footer components
• Use Case: Branded interfaces, complex data visualization, custom UI
• Code: View Demo Code

• Features: CSV export, custom actions, bulk operations
• Use Case: Data export, administrative tools, workflow management
• Code: View Demo Code

interface DataTableColumn<T> {
  field: string                                    // Field name from data object
  header: string                                  // Display name for column header
  sortable?: boolean                              // Enable sorting (default: false)
  filterable?: boolean                            // Enable filtering (default: false)
  groupable?: boolean                             // Enable grouping (default: false)
  pinned?: 'left' | 'right' | null               // Pin column to side (default: null)
  type?: 'text' | 'number' | 'date' | 'select' | 'boolean'  // Data type
  width?: string                                  // Fixed column width
  minWidth?: string                               // Minimum column width
  maxWidth?: string                               // Maximum column width
  hidden?: boolean                                // Hide column (default: false)
  editable?: boolean                              // Enable inline editing (default: false)
  useSelection?: boolean                          // Use checkbox for selection
  aggregation?: 'count' | 'total' | 'avg' | 'min' | 'max'  // Aggregation function
  filterOptions?: string[]                        // Options for select filters
  cellRenderer?: (value: any, row: T) => React.ReactNode  // Custom cell renderer
  headerRenderer?: (column: DataTableColumn<T>) => React.ReactNode  // Custom header
  footerRenderer?: (summary: any, rows: T[]) => React.ReactNode  // Custom footer
  valueGetter?: (row: T) => any                   // Custom value extraction
}

The component is built with Tailwind CSS and provides extensive customization options:

// Custom row styling
<DataTable
  data={employees}
  columns={columns}
  rowClassName={(row) => 
    row.active ? 'bg-green-50 hover:bg-green-100' : 'bg-red-50 hover:bg-red-100'
  }
/>

// Custom container styling
<DataTable
  className="bg-white rounded-lg shadow-lg border border-gray-200"
  // ... other props
/>

const columns = [
  {
    field: 'status',
    header: 'Status',
    cellRenderer: (value, row) => (
      <Badge variant={value === 'active' ? 'default' : 'destructive'}>
        {value}
      </Badge>
    )
  }
];

Comprehensive test coverage ensures reliability:

# Run all tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

Test Coverage Includes:

• ✅ Core DataTable component
• ✅ Filtering and sorting functionality
• ✅ Grouping and hierarchical display
• ✅ Pagination and data manipulation
• ✅ Column configuration and management
• ✅ Export functionality
• ✅ Utility functions and helpers

Enable for datasets with 1000+ rows:

<DataTable
  virtualScrolling={true}
  data={largeDataset}
  // ... other props
/>

• Efficient re-renders with React.memo
• Debounced filter inputs
• Lazy loading for large datasets
• Optimized sorting algorithms

• Modern Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
• Mobile: iOS Safari 14+, Chrome Mobile 90+
• Node.js: 18.x or higher

• Size: ~45KB gzipped (including Tailwind CSS utilities)
• Dependencies: React 18+, React DOM 18+
• Tree-shaking: Full support for optimal bundle sizes

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Add tests for your changes
5. Ensure all tests pass (npm test)
6. Commit your changes (git commit -m 'Add amazing feature')
7. Push to the branch (git push origin feature/amazing-feature)
8. Open a Pull Request

MIT License - see the LICENSE file for details.

• 🐛 Report bugs
• 💡 Request features
• 📖 Documentation
• 💬 Discussions
• 📧 Email support

• React Table - Headless table library
• AG Grid - Enterprise data grid
• Material-UI DataGrid - Material Design grid

Made with ❤️ by the Advanced React DataTable team

Star this repository if you find it helpful!