simply-table

A powerful, lightweight table library for React applications with sensible defaults and complete customization control.

Why simply-table?

• 🚀 Zero Config to Advanced - Works great out of the box, scales to complex use cases
• ⚡ Performance First - Virtual scrolling handles 10,000+ rows smoothly
• 🎨 Fully Customizable - Style everything or use defaults - your choice
• 📦 Tiny Bundle - Tree-shakeable, optimized for production
• 🔧 TypeScript Native - Complete type safety and IntelliSense support

Quick Start

Installation

npm install simply-table

Basic Example

import { SimplyTable } from 'simply-table';
import type { Column } from 'simply-table';

const columns: Column<User>[] = [
  { id: 'name', field: 'name', header: 'Name', sortable: true },
  { id: 'email', field: 'email', header: 'Email' },
  { id: 'role', field: 'role', header: 'Role' },
];

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

function App() {
  return <SimplyTable columns={columns} rows={rows} />;
}

That's it! You now have a fully functional table with sorting, column resizing, and drag-to-reorder.

Features

• ✅ Sorting & Filtering - Client-side and server-side support
• ✅ Pagination - Optional, with customizable page sizes
• ✅ Virtual Scrolling - Efficient rendering for large datasets
• ✅ Column Management - Resize, reorder, and customize columns
• ✅ Custom Rendering - Full control over cells, rows, and components
• ✅ TypeScript - Complete type definitions included
• ✅ Accessible - Built with accessibility in mind
• ✅ Themeable - CSS variables for easy customization

Documentation

📚 Full Documentation - Comprehensive guides and examples

Quick Links

• Basic Examples - Get started with simple configurations
• Sorting & Filtering - Implement data operations
• Pagination - Handle large datasets
• Virtualization - Optimize performance
• Custom Rendering - Customize appearance
• Theme Builder - Create custom themes
• API Reference - Complete API documentation

Advanced Usage

With Pagination

<SimplyTable
  columns={columns}
  rows={rows}
  enablePagination={true}
  pageSize={10}
  pageSizeOptions={[10, 25, 50, 100]}
/>

With Virtual Scrolling

<SimplyTable
  columns={columns}
  rows={largeDataset}
  enableVirtualization={true}
  rowHeight={48}
/>

Custom Cell Rendering

const columns: Column<User>[] = [
  {
    id: 'status',
    field: 'status',
    header: 'Status',
    cellRenderer: ({ value }) => (
      <span className={value === 'active' ? 'text-green-600' : 'text-gray-400'}>
        {value}
      </span>
    ),
  },
];

Using Exported Hooks

Build custom table solutions with exported hooks:

import { useSorting, usePagination, useFiltering } from 'simply-table';

function CustomTable() {
  const { sortedRows, handleSort } = useSorting(rows, columns, 'client');
  const { paginatedRows, page, handlePageChange } = usePagination(sortedRows);
  
  // Build your custom UI
}

Theming

Customize the table appearance using CSS variables:

:root {
  --st-radius: 0.5rem;
  --st-border: 0 0% 90%;
  --st-primary: 221 83% 53%;
  /* ... more variables */
}

Use the Theme Builder to create and export custom themes visually.

TypeScript Support

Full TypeScript support with complete type definitions:

import type {
  SimplyTableProps,
  Column,
  CellRendererParams,
  SortModel,
  FilterModel,
} from 'simply-table';

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

Support the Project

⭐ If you find simply-table useful, please star the repository!

Your support helps the project grow and improve. Star on GitHub →

Links

• Documentation
• GitHub Repository
• npm Package
• Issue Tracker
• Changelog

License

MIT © Nativ Sibony

Made with ❤️ by the simply-table team