Utilities & Style Configuration

React Table Grid provides several utility functions and type definitions to help you build and customize tables. This guide covers the available utilities, their usage, and type definitions.

Type Definitions

Column Configuration

The Column type defines how each column should be structured:

interface Column<T> {
  id: keyof T;                    // Unique identifier
  header: ReactNode | (() => ReactNode); // Column header
  accessorKey: keyof T;           // Data field to display
  sortable?: boolean;             // Enable sorting
  className?: string;             // Custom CSS
  width?: string;                 // Column width
  group?: string;                 // Group name
  pinned?: 'left' | 'right' | false; // Pin position
  cell?: (props: {               // Custom cell renderer
    value: T[keyof T];
    row: T;
    onChange?: (value: T[keyof T]) => void;
    onDelete?: () => void;
  }) => ReactNode;
}

Component Props

TableGrid Props

interface TableGridProps<T> {
  columns: Column<T>[];          // Column definitions
  data: T[];                     // Table data
  variant?: "modern" | "minimal" | "classic"; // Visual style
  maxHeight?: string;           // Maximum table height
  enableFiltering?: boolean;    // Enable search
  enableFuzzySearch?: boolean;  // Enable fuzzy search
  fuzzySearchKeys?: Array<keyof T>; // Fields to search
  enableColumnResize?: boolean; // Enable column resize
  components?: {                // Custom components
    Header?: React.ComponentType;
    Cell?: React.ComponentType;
    EmptyState?: React.ComponentType;
    LoadingState?: React.ComponentType;
    SearchInput?: React.ComponentType;
  };
  styleConfig?: {               // Style customization
    header?: { className?: string; style?: React.CSSProperties };
    row?: { className?: string; style?: React.CSSProperties };
    cell?: { className?: string; style?: React.CSSProperties };
  };
}

Event Handlers

interface TableEventMap<T> {
  onSort: (column: Column<T>, direction: "asc" | "desc") => void;
  onFilter: (value: string, filteredData: T[]) => void;
  onColumnResize: (columnId: keyof T, width: number) => void;
  onColumnVisibilityChange: (columnId: keyof T, isVisible: boolean) => void;
  onColumnPin: (columnId: keyof T, position: "left" | "right" | false) => void;
  onRowSelect: (row: T, index: number) => void;
  onStateChange: (state: TableState<T>) => void;
}

Style Configuration

interface TableStyleConfig {
  container?: {
    className?: string;
    style?: React.CSSProperties;
    wrapperClassName?: string;
    scrollContainerClassName?: string;
    tableClassName?: string;
  };
  header?: {
    className?: string;
    style?: React.CSSProperties;
    headerRowClassName?: string;
    headerCellClassName?: string;
    headerGroupClassName?: string;
  };
 
  body?: {
    style?: React.CSSProperties;
    className?: string;
    rowClassName?: string;
    cellClassName?: string;
  };
 
  resizer?: {
    className?: string;
    style?: React.CSSProperties;
  };
 
  resizerIndicator?: {
    className?: string;
    style?: React.CSSProperties;
  };
 
  sortButton?: {
    className?: string;
    style?: React.CSSProperties;
  };
 
  utilityStyles?: {
    emptyClassName?: string;
    searchContainerClassName?: string;
    searchInputClassName?: string;
    loadingClassName?: string;
    style?: React.CSSProperties;
  };
}

Utility Functions

The library also provides several utility functions:

// Create type-safe column definitions
const columnHelper = createColumnHelper<YourDataType>();
 
// Sort table data
sortTableData<T>(data, column, direction);
 
// Filter table data
filterTableData<T>(data, columns, filterValue);
 
// Calculate column widths
calculateColumnWidth<T>(column, data, minWidth);
 
// Group columns
groupColumns<T>(columns);

Component Customization

Custom Cell Rendering

const columns = [
  columnHelper.accessor('status', {
    header: 'Status',
    cell: ({ value, row }) => (
      <span className={`status-${value}`}>
        {value}
      </span>
    ),
  }),
];

Custom Empty State

<TableGrid
  components={{
    EmptyState: () => (
      <div className="empty-state">
        <p>No data available</p>
      </div>
    ),
  }}
/>

Custom Loading State

<TableGrid
  components={{
    LoadingState: () => (
      <div className="loading-state">
        <Spinner />
        <p>Loading data...</p>
      </div>
    ),
  }}
/>

Utilities & Style Configuration

On this page