React Dynamic Table Pro

A powerful, feature-rich React table component with virtual scrolling, fixed columns, sorting, search, and CSV export capabilities.

Features

• 🚀 Virtual Scrolling - Handle large datasets with smooth performance
• 📌 Fixed Columns - Keep important columns visible while scrolling
• 🔍 Search & Filter - Global search across all columns
• 📊 Sorting - Click column headers to sort data
• 📄 CSV Export - Download data as CSV files
• 🎨 Customizable Themes - Multiple built-in themes and custom styling
• 📱 Responsive Design - Works on all screen sizes
• ⚡ High Performance - Optimized for large datasets
• 🔧 Easy Integration - Simple props-based configuration

Installation

npm install react-dynamic-table-pro

Quick Start

import React from 'react'
import DynamicTable from 'react-dynamic-table-pro'

function App() {
  const data = [
    { id: 1, name: 'John Doe', email: '[email protected]', age: 30 },
    { id: 2, name: 'Jane Smith', email: '[email protected]', age: 25 },
    // ... more data
  ]

  return (
    <DynamicTable 
      data={data}
      title="User Data"
      showSearch={true}
      enableVirtualScroll={true}
      fixedColumns={[0]} // Fix first column
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | any[] | [] | Array of objects to display in table | | title | string | "Dynamic Table" | Table title | | showSearch | boolean | true | Enable/disable search functionality | | enableVirtualScroll | boolean | true | Enable virtual scrolling for performance | | tableHeight | string | "500px" | Height of the table container | | tableWidth | string | "100%" | Width of the table container | | showColumnBorders | boolean | true | Show borders between columns | | showRowBorders | boolean | true | Show borders between rows | | rowHeight | number | 45 | Height of each table row | | bufferSize | number | 10 | Number of extra rows to render for smooth scrolling | | formatters | Record<string, Function> | {} | Custom formatters for specific columns | | columnMapping | Record<string, string> | {} | Custom display names for columns | | hideColumns | string[] | [] | Array of column keys to hide | | enableCSVDownload | boolean | true | Enable CSV download functionality | | csvFileName | string | "table_data" | Default filename for CSV downloads | | enableCommaFormatting | boolean | true | Format numbers with commas and colors | | initialRecordsToShow | number | 50 | Number of records to show initially | | enableHorizontalScroll | boolean | true | Enable horizontal scrolling | | recordsPerLoad | number | 25 | Number of records to load on scroll | | visibleColumnsBeforeScroll | number | 4 | Number of columns to show before enabling horizontal scroll | | fixedColumns | number[] | [] | Array of column indices to fix on the left | | theme | TableTheme | themes.default | Custom theme configuration |

Advanced Usage

Custom Formatters

<DynamicTable 
  data={data}
  formatters={{
    date: (value) => new Date(value).toLocaleDateString(),
    currency: (value) => `$${value.toFixed(2)}`,
    status: (value) => value ? 'Active' : 'Inactive'
  }}
/>

Fixed Columns

<DynamicTable 
  data={data}
  fixedColumns={[0, 1]} // Fix first two columns
  columnMapping={{
    'id': 'ID',
    'name': 'Full Name',
    'email': 'Email Address'
  }}
/>

Custom Theme

import { createTheme } from 'react-dynamic-table-pro'

const customTheme = createTheme({
  headerBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  headerColor: 'white',
  fixedColumnBg: 'rgba(102, 126, 234, 0.08)',
  fixedColumnBorder: '#667eea'
})

<DynamicTable 
  data={data}
  theme={customTheme}
/>

Predefined Themes

import { themes } from 'react-dynamic-table-pro'

// Use predefined themes
<DynamicTable data={data} theme={themes.dark} />
<DynamicTable data={data} theme={themes.green} />
<DynamicTable data={data} theme={themes.purple} />

Styling

The component comes with built-in CSS that's automatically included. You can override styles using CSS classes:

/* Custom table styling */
.mis-table {
  font-family: 'Your Custom Font', sans-serif;
}

.mis-table-header th {
  font-weight: 600;
}

/* Custom fixed column styling */
.fixed-column {
  background: your-custom-color !important;
}

Performance Tips

1. Virtual Scrolling: Keep enableVirtualScroll={true} for large datasets
2. Row Height: Set consistent rowHeight for better performance
3. Buffer Size: Adjust bufferSize based on your data size
4. Fixed Columns: Use fixedColumns sparingly for better performance

Browser Support

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you have any questions or issues, please open an issue on GitHub.