React Elegant Table

A professional, high-quality, and highly customizable React table component built on top of TanStack Table v8. Designed for modern web applications with a focus on aesthetics, performance, and developer experience.

Features

• 🚀 Built on TanStack Table v8: Headless, type-safe, and powerful.
• 🎨 Modern & Elegant Design: Beautifully styled out of the box with Tailwind CSS.
• ⚡ High Performance: Optimized for large datasets with built-in virtualization.
• 🔍 Sorting & Filtering: Built-in support for column sorting and filtering.
• 📄 Pagination: Easy-to-use pagination controls.
• ✅ Row Selection: Multi-row selection with a sticky selection banner.
• 📱 Responsive: Works seamlessly on desktop and mobile.
• 🛠 Highly Customizable: easy to override styles and components.
• 🌑 Dark Mode Support: Fully compatible with dark mode.
• 🤖 MCP Ready: Includes hooks for integrating with Model Context Protocol servers.

Installation

npm install react-elegant-table
# or
yarn add react-elegant-table
# or
pnpm add react-elegant-table

Usage

Basic Example

import { ElegantTable } from 'react-elegant-table';
import { ColumnDef } from '@tanstack/react-table';

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  {
    accessorKey: 'role',
    header: 'Role',
  },
];

const data: User[] = [
  { id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', role: 'User' },
];

function App() {
  return (
    <div className="p-8">
      <ElegantTable data={data} columns={columns} />
    </div>
  );
}

Virtualization (High Performance)

For large datasets, enable virtualization to render only the visible rows.

<ElegantTable 
  data={largeDataset} 
  columns={columns} 
  virtualize={true} 
  estimatedRowHeight={48} 
/>

MCP Server Integration (Concept)

React Elegant Table includes a conceptual hook useMCPData to easily fetch and display data from a Model Context Protocol (MCP) server.

import { ElegantTable, useMCPData } from 'react-elegant-table';

// Mock MCP Client
const mcpClient = {
  readResource: async (uri) => {
    // Call your actual MCP server here
    return { contents: [{ text: JSON.stringify([{ id: 1, name: 'MCP User' }]) }] };
  }
};

function MCPTable() {
  const { data, isLoading } = useMCPData(
    mcpClient,
    'mcp://users/list',
    (content) => JSON.parse(content)
  );

  return (
    <ElegantTable 
      data={data} 
      columns={columns} 
      isLoading={isLoading} 
    />
  );
}

API Reference

ElegantTable Props

| Prop | Type | Description | Default | |---|---|---|---| | data | T[] | The data to display in the table. | Required | | columns | ColumnDef<T>[] | The column definitions. | Required | | enableRowSelection | boolean | Enable row selection checkboxes. | false | | enableSorting | boolean | Enable column sorting. | true | | enableFiltering | boolean | Enable column filtering. | true | | enablePagination | boolean | Enable pagination. | true | | pageSize | number | Number of rows per page. | 10 | | onRowClick | (row: T) => void | Callback when a row is clicked. | undefined | | virtualize | boolean | Enable row virtualization for performance. | false | | estimatedRowHeight | number | Estimated height of a row in pixels. | 44 | | isLoading | boolean | Show loading skeleton. | false | | loadingRowCount | number | Number of skeleton rows to show. | 5 |

Customization

You can customize the appearance by overriding the default Tailwind CSS classes or providing your own components.

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.