122. Data Table - Sorting

Build a Data Table component in React that displays tabular data with column sorting functionality.

1. Table Display

• Render data in a table format with headers and rows
• Display all columns from the data
• Basic table styling with borders and spacing
• Responsive layout

2. Column Sorting

• Click on column header to sort by that column
• Toggle between ascending, descending, and unsorted states
• Visual indicator (arrow) showing sort direction
• Sort by string (alphabetical) and number (numerical) types

3. Data Structure

interface Column<T> {
  key: keyof T;
  label: string;
  sortable?: boolean;
}

interface DataTableProps<T> {
  data: T[];
  columns: Column<T>[];
}

Examples

const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'age', label: 'Age', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
];

const data = [
  { name: 'John Doe', age: 28, email: 'john@example.com' },
  { name: 'Jane Smith', age: 32, email: 'jane@example.com' },
];

<DataTable data={data} columns={columns} />