### Install Simple Table Core

Source: https://github.com/petera2c/simple-table/blob/main/README.md

This command installs the Simple Table core package using npm. It's the first step to integrate the data grid component into your React project. No specific inputs or outputs are detailed, but it ensures the package is available for use.

```bash
npm install simple-table-core
```

--------------------------------

### SimpleTable Sorting and Filtering Example (React/TypeScript)

Source: https://context7.com/petera2c/simple-table/llms.txt

Demonstrates how to configure and use the SimpleTable component for built-in sorting and filtering. It includes setup for headers, rows, and callbacks for sort and filter changes. Dependencies include 'simple-table-core'.

```tsx
import { SimpleTable, HeaderObject, SortColumn, TableFilterState } from 'simple-table-core';

function SortingFilteringExample() {
  const handleSortChange = (sort: SortColumn | null) => {
    console.log('Sort changed:', sort);
    // { accessor: 'age', direction: 'ascending' } or null
  };

  const handleFilterChange = (filters: TableFilterState) => {
    console.log('Filters changed:', filters);
    // { name: { operator: 'contains', value: 'john' } }
  };

  const headers: HeaderObject[] = [
    {
      accessor: 'id',
      label: 'ID',
      width: 80,
      isSortable: true,
      filterable: true,
      type: 'number'
    },
    {
      accessor: 'name',
      label: 'Name',
      width: 150,
      isSortable: true,
      filterable: true,
      type: 'string'
    },
    {
      accessor: 'age',
      label: 'Age',
      width: 100,
      isSortable: true,
      filterable: true,
      type: 'number'
    },
    {
      accessor: 'hireDate',
      label: 'Hire Date',
      width: 150,
      isSortable: true,
      filterable: true,
      type: 'date'
    }
  ];

  const rows = [
    { id: 1, name: 'John Doe', age: 28, hireDate: '2020-01-15' },
    { id: 2, name: 'Jane Smith', age: 32, hireDate: '2021-03-22' },
    { id: 3, name: 'Bob Johnson', age: 45, hireDate: '2019-11-05' }
  ];

  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={rows}
      rowIdAccessor="id"
      initialSortColumn="age"
      initialSortDirection="descending"
      onSortChange={handleSortChange}
      onFilterChange={handleFilterChange}
      height="400px"
    />
  );
}

```

--------------------------------

### SimpleTable Server-Side Pagination Example (React/TypeScript)

Source: https://context7.com/petera2c/simple-table/llms.txt

Illustrates how to implement server-side pagination with the SimpleTable component using the offset/limit pattern. This involves fetching data from an API based on the current page and total row count. Dependencies include 'simple-table-core'.

```tsx
import { SimpleTable, HeaderObject } from 'simple-table-core';
import { useState, useEffect } from 'react';

function ServerSidePaginationExample() {
  const [rows, setRows] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalRows, setTotalRows] = useState(0);
  const rowsPerPage = 10;

  const fetchPageData = async (page: number) => {
    const offset = (page - 1) * rowsPerPage;
    const response = await fetch(
      `/api/users?limit=${rowsPerPage}&offset=${offset}`
    );
    const data = await response.json();
    setRows(data.rows);
    setTotalRows(data.total);
  };

  useEffect(() => {
    fetchPageData(currentPage);
  }, [currentPage]);

  const handlePageChange = async (page: number) => {
    setCurrentPage(page);
    await fetchPageData(page);
  };

  const headers: HeaderObject[] = [
    { accessor: 'id', label: 'ID', width: 80 },
    { accessor: 'name', label: 'Name', width: 150 },
    { accessor: 'email', label: 'Email', width: 200 }
  ];

  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={rows}
      rowIdAccessor="id"
      shouldPaginate={true}
      serverSidePagination={true}
      rowsPerPage={rowsPerPage}
      totalRowCount={totalRows}
      onPageChange={handlePageChange}
      height="600px"
    />
  );
}

```

--------------------------------

### Basic Table Rendering with SimpleTable Component (React)

Source: https://context7.com/petera2c/simple-table/llms.txt

Demonstrates how to render a basic data table using the SimpleTable component. It requires defining column headers with metadata and providing row data as JavaScript objects. This example showcases basic configuration for headers, rows, and table features like resizing and reordering.

```tsx
import { SimpleTable, HeaderObject } from 'simple-table-core';
import 'simple-table-core/styles.css';

const headers: HeaderObject[] = [
  {
    accessor: 'id',
    label: 'ID',
    width: 80,
    isSortable: true,
    filterable: true
  },
  {
    accessor: 'name',
    label: 'Name',
    minWidth: 80,
    width: '1fr',
    isSortable: true,
    filterable: true
  },
  {
    accessor: 'age',
    label: 'Age',
    width: 100,
    isSortable: true,
    filterable: true
  },
  {
    accessor: 'role',
    label: 'Role',
    width: 150,
    isSortable: true,
    filterable: true
  }
];

const rows = [
  { id: 1, name: 'John Doe', age: 28, role: 'Developer', department: 'Engineering' },
  { id: 2, name: 'Jane Smith', age: 32, role: 'Designer', department: 'Design' },
  { id: 3, name: 'Bob Johnson', age: 45, role: 'Manager', department: 'Management' }
];

function App() {
  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={rows}
      rowIdAccessor="id"
      height="400px"
      columnResizing={true}
      columnReordering={true}
      selectableCells={true}
      theme="light"
    />
  );
}
```

--------------------------------

### Custom Cell Rendering in React Table

Source: https://context7.com/petera2c/simple-table/llms.txt

Demonstrates how to render custom React components within table cells for enhanced presentation, such as styled status indicators and progress bars. This example uses 'simple-table-core' and React. Dependencies include 'simple-table-core'.

```tsx
import { SimpleTable, HeaderObject, CellRendererProps } from 'simple-table-core';

function CustomCellRendererExample() {
  const headers: HeaderObject[] = [
    { accessor: 'id', label: 'ID', width: 80 },
    { accessor: 'name', label: 'Name', width: 150 },
    {
      accessor: 'status',
      label: 'Status',
      width: 120,
      cellRenderer: ({ value, row }: CellRendererProps) => (
        <span style={{
          color: row.status === 'Active' ? 'green' : 'orange',
          fontWeight: 'bold',
          padding: '4px 8px',
          borderRadius: '4px',
          backgroundColor: row.status === 'Active' ? '#e6f7e6' : '#fff4e6'
        }}>
          {String(value)}
        </span>
      )
    },
    {
      accessor: 'progress',
      label: 'Progress',
      width: 150,
      cellRenderer: ({ value }: CellRendererProps) => (
        <div style={{ width: '100%', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
          <div style={{
            width: `${value}%`,
            height: '20px',
            backgroundColor: '#4caf50',
            borderRadius: '4px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            fontSize: '12px'
          }}>
            {value}%
          </div>
        </div>
      )
    }
  ];

  const rows = [
    { id: 1, name: 'Task A', status: 'Active', progress: 75 },
    { id: 2, name: 'Task B', status: 'Inactive', progress: 30 },
    { id: 3, name: 'Task C', status: 'Active', progress: 100 }
  ];

  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={rows}
      rowIdAccessor="id"
      height="300px"
    />
  );
}

```

--------------------------------

### Pin Columns Left or Right in SimpleTable

Source: https://context7.com/petera2c/simple-table/llms.txt

This example demonstrates how to pin columns to the left or right side of the table using the 'pinned' property in the HeaderObject. Pinned columns remain visible while the rest of the table horizontally scrolls. This enhances usability for tables with many columns, especially when displaying essential information or actions. It requires 'simple-table-core'.

```tsx
import { SimpleTable, HeaderObject } from 'simple-table-core';

function PinnedColumnsExample() {
  const headers: HeaderObject[] = [
    {
      accessor: 'id',
      label: 'ID',
      width: 80,
      pinned: 'left'
    },
    {
      accessor: 'name',
      label: 'Name',
      width: 150,
      pinned: 'left'
    },
    { accessor: 'department', label: 'Department', width: 150 },
    { accessor: 'position', label: 'Position', width: 150 },
    { accessor: 'location', label: 'Location', width: 150 },
    { accessor: 'salary', label: 'Salary', width: 120 },
    { accessor: 'hireDate', label: 'Hire Date', width: 150 },
    {
      accessor: 'actions',
      label: 'Actions',
      width: 120,
      pinned: 'right',
      cellRenderer: () => (
        <div>
          <button style={{ marginRight: '4px' }}>Edit</button>
          <button>Delete</button>
        </div>
      )
    }
  ];

  const rows = [
    {
      id: 1,
      name: 'John Doe',
      department: 'Engineering',
      position: 'Senior Developer',
      location: 'New York',
      salary: 85000,
      hireDate: '2020-01-15',
      actions: null
    },
    {
      id: 2,
      name: 'Jane Smith',
      department: 'Design',
      position: 'Lead Designer',
      location: 'San Francisco',
      salary: 78000,
      hireDate: '2021-03-22',
      actions: null
    }
  ];

  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={rows}
      rowIdAccessor="id"
      height="400px"
      columnResizing={true}
    />
  );
}

```

--------------------------------

### Configure Advanced Column Features in SimpleTable

Source: https://context7.com/petera2c/simple-table/llms.txt

This snippet shows how to use value formatters for displaying data (e.g., currency, percentages), custom cell renderers for conditional styling, custom comparators for sortable columns with specific logic (like priority levels), and accessing nested data using dot notation for accessors. It requires 'simple-table-core' for the SimpleTable component and its associated types.

```tsx
import { SimpleTable, HeaderObject, ValueFormatterProps, ComparatorProps } from 'simple-table-core';

function AdvancedColumnExample() {
  const headers: HeaderObject[] = [
    {
      accessor: 'id',
      label: 'ID',
      width: 80
    },
    {
      accessor: 'name',
      label: 'Name',
      width: 150
    },
    {
      accessor: 'salary',
      label: 'Salary',
      width: 120,
      type: 'number',
      valueFormatter: ({ value }: ValueFormatterProps) => {
        return `$${Number(value).toLocaleString()}`;
      },
      align: 'right'
    },
    {
      accessor: 'performance',
      label: 'Performance',
      width: 130,
      type: 'number',
      valueFormatter: ({ value }: ValueFormatterProps) => {
        return `${value}%`;
      },
      cellRenderer: ({ value }: any) => (
        <div style={{
          color: Number(value) >= 80 ? 'green' : Number(value) >= 60 ? 'orange' : 'red',
          fontWeight: 'bold'
        }}>
          {value}%
        </div>
      )
    },
    {
      accessor: 'priority',
      label: 'Priority',
      width: 120,
      isSortable: true,
      comparator: ({ rowA, rowB, direction }: ComparatorProps) => {
        const priorityOrder = { 'High': 3, 'Medium': 2, 'Low': 1 };
        const diff = priorityOrder[rowA.priority as keyof typeof priorityOrder] -
                     priorityOrder[rowB.priority as keyof typeof priorityOrder];
        return direction === 'ascending' ? diff : -diff;
      }
    },
    {
      accessor: 'stats.rating',
      label: 'Rating',
      width: 100,
      type: 'number',
      tooltip: 'Employee performance rating'
    }
  ];

  const rows = [
    { id: 1, name: 'John Doe', salary: 85000, performance: 92, priority: 'High', stats: { rating: 4.5 } },
    { id: 2, name: 'Jane Smith', salary: 78000, performance: 75, priority: 'Medium', stats: { rating: 4.0 } },
    { id: 3, name: 'Bob Johnson', salary: 92000, performance: 88, priority: 'Low', stats: { rating: 4.2 } }
  ];

  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={rows}
      rowIdAccessor="id"
      height="400px"
      columnResizing={true}
    />
  );
}

```

--------------------------------

### Programmatic Table Control in React

Source: https://context7.com/petera2c/simple-table/llms.txt

Illustrates how to gain programmatic control over a SimpleTable instance using a ref. This allows for dynamic operations such as updating cell data, exporting the table content to CSV, retrieving currently visible rows, and renaming headers. It requires 'simple-table-core' and uses React's useRef hook.

```tsx
import { SimpleTable, HeaderObject, TableRefType } from 'simple-table-core';
import { useRef } from 'react';

function TableRefExample() {
  const tableRef = useRef<TableRefType>(null);

  const updateCell = () => {
    tableRef.current?.updateData({
      rowId: 1,
      accessor: 'status',
      newValue: 'Completed'
    });
  };

  const exportToCSV = () => {
    tableRef.current?.exportToCSV({
      filename: 'my-data.csv'
    });
  };

  const getVisibleRows = () => {
    const visibleRows = tableRef.current?.getVisibleRows();
    console.log('Currently visible rows:', visibleRows);
  };

  const renameHeader = () => {
    tableRef.current?.setHeaderRename({
      accessor: 'status'
    });
  };

  const headers: HeaderObject[] = [
    { accessor: 'id', label: 'ID', width: 80 },
    { accessor: 'name', label: 'Name', width: 150 },
    { accessor: 'status', label: 'Status', width: 120 }
  ];

  const rows = [
    { id: 1, name: 'Task A', status: 'Pending' },
    { id: 2, name: 'Task B', status: 'In Progress' }
  ];

  return (
    <div>
      <div style={{ marginBottom: '16px' }}>
        <button onClick={updateCell}>Update Cell</button>
        <button onClick={exportToCSV}>Export to CSV</button>
        <button onClick={getVisibleRows}>Get Visible Rows</button>
        <button onClick={renameHeader}>Rename Header</button>
      </div>
      <SimpleTable
        tableRef={tableRef}
        defaultHeaders={headers}
        rows={rows}
        rowIdAccessor="id"
        height="400px"
      />
    </div>
  );
}

```

--------------------------------

### Row Grouping with Aggregation in React

Source: https://context7.com/petera2c/simple-table/llms.txt

Demonstrates how to configure SimpleTable for hierarchical row grouping by specifying expandable columns and applying aggregation functions like sum, count, and average to numeric columns. It requires 'simple-table-core' and uses React.

```tsx
import { SimpleTable, HeaderObject, AggregationType } from 'simple-table-core';

function RowGroupingExample() {
  const headers: HeaderObject[] = [
    {
      accessor: 'region',
      label: 'Region',
      width: 150,
      expandable: true
    },
    {
      accessor: 'country',
      label: 'Country',
      width: 150,
      expandable: true
    },
    {
      accessor: 'city',
      label: 'City',
      width: 150
    },
    {
      accessor: 'revenue',
      label: 'Revenue',
      width: 120,
      type: 'number',
      aggregation: {
        type: 'sum' as AggregationType,
        label: 'Total'
      }
    },
    {
      accessor: 'customers',
      label: 'Customers',
      width: 120,
      type: 'number',
      aggregation: {
        type: 'count' as AggregationType
      }
    },
    {
      accessor: 'avgOrderValue',
      label: 'Avg Order',
      width: 120,
      type: 'number',
      aggregation: {
        type: 'average' as AggregationType
      }
    }
  ];

  const rows = [
    { id: 1, region: 'North America', country: 'USA', city: 'New York', revenue: 150000, customers: 45, avgOrderValue: 3333 },
    { id: 2, region: 'North America', country: 'USA', city: 'Los Angeles', revenue: 120000, customers: 38, avgOrderValue: 3158 },
    { id: 3, region: 'North America', country: 'Canada', city: 'Toronto', revenue: 95000, customers: 32, avgOrderValue: 2969 },
    { id: 4, region: 'Europe', country: 'UK', city: 'London', revenue: 180000, customers: 52, avgOrderValue: 3462 },
    { id: 5, region: 'Europe', country: 'Germany', city: 'Berlin', revenue: 140000, customers: 41, avgOrderValue: 3415 }
  ];

  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={rows}
      rowIdAccessor="id"
      rowGrouping={['region', 'country']}
      expandAll={true}
      height="500px"
    />
  );
}

```

--------------------------------

### Row Selection with Callbacks in SimpleTable (React)

Source: https://context7.com/petera2c/simple-table/llms.txt

Illustrates how to implement row selection functionality in the SimpleTable component. This involves enabling row selection and providing a callback function to handle selection changes. The callback receives information about the selected row, its selection state, and the set of all currently selected row IDs.

```tsx
import { SimpleTable, HeaderObject, RowSelectionChangeProps } from 'simple-table-core';
import { useState } from 'react';

function RowSelectionExample() {
  const [selectedRowsInfo, setSelectedRowsInfo] = useState([]);

  const handleRowSelectionChange = ({ row, isSelected, selectedRows }: RowSelectionChangeProps) => {
    const selectedRowsArray = Array.from(selectedRows)
      .map(rowId => rows.find(r => String(r.id) === rowId))
      .filter(Boolean);

    setSelectedRowsInfo(selectedRowsArray);
    console.log(`${isSelected ? 'Selected' : 'Deselected'}: ${row.name}`);
  };

  const headers: HeaderObject[] = [
    { accessor: 'id', label: 'ID', width: 80, isSortable: true },
    { accessor: 'name', label: 'Name', minWidth: 120, width: '1fr', isSortable: true },
    { accessor: 'status', label: 'Status', width: 100, filterable: true }
  ];

  const rows = [
    { id: 1, name: 'John Doe', status: 'Active' },
    { id: 2, name: 'Jane Smith', status: 'Active' },
    { id: 3, name: 'Bob Johnson', status: 'Inactive' }
  ];

  return (
    <div>
      <p>Selected: {selectedRowsInfo.length} rows</p>
      <SimpleTable
        defaultHeaders={headers}
        rows={rows}
        rowIdAccessor="id"
        enableRowSelection={true}
        onRowSelectionChange={handleRowSelectionChange}
        height="400px"
      />
    </div>
  );
}
```

--------------------------------

### Editable Cells with State Management in React

Source: https://context7.com/petera2c/simple-table/llms.txt

Implements inline cell editing for various data types (string, number, date, enum, boolean) within a SimpleTable. It uses React's useState hook to manage and update row data upon cell edits. Dependencies include 'simple-table-core'.

```tsx
import { SimpleTable, HeaderObject, CellChangeProps } from 'simple-table-core';
import { useState } from 'react';

function EditableCellsExample() {
  const [rows, setRows] = useState([
    {
      id: 1,
      firstName: 'John',
      lastName: 'Doe',
      email: 'john@example.com',
      role: 'Developer',
      hireDate: '2020-01-15',
      isActive: true,
      salary: 85000
    },
    {
      id: 2,
      firstName: 'Jane',
      lastName: 'Smith',
      email: 'jane@example.com',
      role: 'Designer',
      hireDate: '2021-03-22',
      isActive: true,
      salary: 78000
    }
  ]);

  const headers: HeaderObject[] = [
    { accessor: 'id', label: 'ID', width: 80, isEditable: false, type: 'number' },
    { accessor: 'firstName', label: 'First Name', width: 150, isEditable: true, type: 'string' },
    { accessor: 'lastName', label: 'Last Name', width: 150, isEditable: true, type: 'string' },
    { accessor: 'email', label: 'Email', minWidth: 100, width: '1fr', isEditable: true, type: 'string' },
    {
      accessor: 'role',
      label: 'Role',
      width: 150,
      isEditable: true,
      type: 'enum',
      enumOptions: [
        { label: 'Developer', value: 'Developer' },
        { label: 'Designer', value: 'Designer' },
        { label: 'Manager', value: 'Manager' }
      ]
    },
    { accessor: 'hireDate', label: 'Hire Date', width: 150, isEditable: true, type: 'date' },
    { accessor: 'isActive', label: 'Active', width: 100, isEditable: true, type: 'boolean' },
    { accessor: 'salary', label: 'Salary', width: 120, isEditable: true, type: 'number' }
  ];

  const updateCell = ({ accessor, newValue, row }: CellChangeProps) => {
    setRows(prevRows => prevRows.map(r =>
      r.id === row.id ? { ...r, [accessor]: newValue } : r
    ));
  };

  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={rows}
      rowIdAccessor="id"
      onCellEdit={updateCell}
      columnResizing={true}
      selectableCells={true}
      height="600px"
    />
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.