React Smart Table

A customizable, feature-rich table component for React with TypeScript support. Inspired by enterprise-grade table implementations.

Features

• ✅ Sorting - Click column headers to sort
• ✅ Row Selection - Checkbox support with bulk selection
• ✅ Custom Rendering - Full control over cell rendering
• ✅ Actions - Built-in edit/delete actions
• ✅ Loading States - Skeleton loading UI
• ✅ TypeScript - Full type safety with generics
• ✅ Responsive - Mobile-friendly design
• ✅ Customizable - Tailwind CSS styling

Installation

npm install react-smart-table

Basic Usage

import { SmartTable } from 'react-smart-table';

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

const users: User[] = [
  { id: 1, name: 'John Doe', email: '[email protected]', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'Inactive' }
];

function App() {
  return (
    <SmartTable
      data={users}
      columns={[
        { key: 'id', title: 'ID', sortable: true },
        { key: 'name', title: 'Name', sortable: true },
        { key: 'email', title: 'Email' },
        { 
          key: 'status', 
          title: 'Status',
          render: (value) => (
            <span className={value === 'Active' ? 'text-green-600' : 'text-red-600'}>
              {value}
            </span>
          )
        }
      ]}
    />
  );
}

Advanced Usage

With Actions and Selection

const [selectedRows, setSelectedRows] = useState<string[]>([]);

<SmartTable
  data={users}
  columns={columns}
  showCheckbox={true}
  showActions={true}
  selectedRows={selectedRows}
  onSelectionChange={setSelectedRows}
  onEdit={(row) => console.log('Edit:', row)}
  onDelete={(row) => console.log('Delete:', row)}
  onRowClick={(row) => console.log('Clicked:', row)}
  rowKey="id"
/>

With Loading State

<SmartTable
  data={users}
  columns={columns}
  loading={isLoading}
  emptyMessage="No users found"
/>

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | T[] | required | Array of data objects | | columns | Column<T>[] | required | Column definitions | | className | string | '' | Additional CSS classes | | showCheckbox | boolean | false | Show row selection checkboxes | | showActions | boolean | false | Show actions column | | onEdit | (row: T) => void | - | Edit button handler | | onDelete | (row: T) => void | - | Delete button handler | | onRowClick | (row: T) => void | - | Row click handler | | loading | boolean | false | Show loading skeleton | | emptyMessage | string | 'No data available' | Empty state message | | selectedRows | string[] | [] | Selected row keys | | onSelectionChange | (selected: string[]) => void | - | Selection change handler | | rowKey | keyof T | 'id' | Unique row identifier |

Column Definition

interface Column<T> {
  key: keyof T;              // Data key
  title: string;             // Column header
  sortable?: boolean;        // Enable sorting
  render?: (value: any, row: T) => React.ReactNode;  // Custom cell renderer
}

Build

npm run build

Development

npm run dev

License

MIT