@aesclo/table

A feature-rich, enterprise-ready data table library built on TanStack Table with React and TypeScript.

✨ Features

Core Features

• 🎯 Sorting - Multi-column sorting with customizable comparators
• 🔍 Filtering - Global search and per-column filters (text, number, select, date)
• 📄 Pagination - Client-side and server-side pagination support
• 👁️ Column Visibility - Show/hide columns dynamically
• 📏 Column Resizing - Drag to resize columns
• 📌 Column Pinning - Pin columns to left or right
• 🎨 Row Selection - Single and multi-row selection
• 🔄 Row Reordering - Drag-and-drop rows to reorder

Premium Features

• ⚡ Virtual Scrolling - Handle thousands of rows efficiently
• ✏️ Inline Editing - Edit cells directly in the table
• 📤 Export - Export to CSV, Excel, PDF
• 📋 Copy/Paste - Copy table data to clipboard
• 🎯 Context Menu - Right-click actions on rows
• 📊 Master-Detail - Expandable row details
• 🔢 Footer Aggregations - Sum, average, count, min, max
• 🌳 Nested Tables - Tables within tables

Enterprise Features

• 🏗️ Column Grouping - Group related columns under headers
• 💾 State Persistence - Save table state to localStorage
• 🌐 Server-Side Operations - Connect to your API
• ♿ Accessibility - WCAG compliant with ARIA attributes and keyboard navigation

📦 Installation

npm install @aesclo/table

Peer Dependencies

npm install react react-dom

🚀 Quick Start

1. Import Styles

import '@aesclo/table/styles.css';

2. Basic Usage

import { DataTable } from '@aesclo/table';

function App() {
  const data = [
    { id: 1, name: 'John Doe', age: 28, email: '[email protected]' },
    { id: 2, name: 'Jane Smith', age: 32, email: '[email protected]' },
  ];

  const columns = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'age', header: 'Age' },
    { accessorKey: 'email', header: 'Email' },
  ];

  return (
    <DataTable
      data={data}
      columns={columns}
      enableSorting
      enableFiltering
      enablePagination
    />
  );
}

📖 Common Use Cases

Sortable & Filterable Table

<DataTable
  data={data}
  columns={columns}
  enableSorting
  enableFiltering
  enableGlobalFilter
  striped
  bordered
/>

Server-Side Table

<DataTable
  data={data}
  columns={columns}
  manualPagination
  manualSorting
  manualFiltering
  onPaginationChange={handlePaginationChange}
  onSortingChange={handleSortingChange}
  onFilteringChange={handleFilteringChange}
  rowCount={totalRows}
/>

Editable Table

const columns = [
  {
    accessorKey: 'name',
    header: 'Name',
    editable: true,
  },
];

<DataTable
  data={data}
  columns={columns}
  updateData={(rowIndex, columnId, value) => {
    // Update your data
  }}
/>

Table with Row Selection & Export

<DataTable
  data={data}
  columns={columns}
  enableRowSelection
  enableExport
  onRowSelectionChange={(selectedRows) => {
    console.log('Selected:', selectedRows);
  }}
/>

Grouped Columns

const columns = [
  {
    header: 'Personal Info',
    columns: [
      { accessorKey: 'firstName', header: 'First Name' },
      { accessorKey: 'lastName', header: 'Last Name' },
    ],
  },
  {
    header: 'Contact',
    columns: [
      { accessorKey: 'email', header: 'Email' },
      { accessorKey: 'phone', header: 'Phone' },
    ],
  },
];

State Persistence

<DataTable
  data={data}
  columns={columns}
  persistState="my-table-key"
  // Table state is automatically saved and restored
/>

🎨 Theming

The table uses CSS variables for easy theming. You can override them in your CSS:

:root {
  --table-border-color: #e5e7eb;
  --table-header-bg: #f9fafb;
  --table-row-hover-bg: #f3f4f6;
  --table-selected-bg: #dbeafe;
}

📚 API Reference

TableProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | TData[] | required | Array of data objects | | columns | TableColumn<TData>[] | required | Column definitions | | enableSorting | boolean | true | Enable column sorting | | enableFiltering | boolean | true | Enable column filters | | enableGlobalFilter | boolean | true | Enable global search | | enablePagination | boolean | true | Enable pagination | | enableRowSelection | boolean | false | Enable row selection | | enableColumnPinning | boolean | false | Enable column pinning | | enableExpanding | boolean | false | Enable row expansion | | enableVirtualization | boolean | false | Enable virtual scrolling | | enableExport | boolean | false | Enable export buttons | | pageSize | number | 10 | Rows per page | | striped | boolean | false | Striped row styling | | bordered | boolean | false | Add borders | | hoverable | boolean | true | Highlight on hover | | compact | boolean | false | Compact row spacing | | persistState | string | - | Key for localStorage persistence |

See full API documentation for all props and column options.

🛠️ Built With

• React - UI framework
• TanStack Table - Headless table logic
• TypeScript - Type safety
• Tailwind CSS - Styling
• dnd-kit - Drag and drop
• jsPDF - PDF export
• xlsx - Excel export

📄 License

MIT © Aesclo

🤝 Contributing

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

🐛 Issues

Found a bug? Please file an issue on GitHub.

📞 Support

For questions and support, please open an issue on GitHub.