Table Grid

The TableGrid component is a powerful yet easy-to-use React table solution that helps you display and manage data in a table format. Whether you're building a simple data table or need advanced features, TableGrid has everything you need! 🚀

Quick Start Example

Here's a simple example to get you started:

import { TableGrid, createColumnHelper } from '@shakibdshy/react-tablegrid';
 
// 1. Define what your data looks like
type Person = {
  id: number;
  name: string;
  email: string;
};
 
// 2. Create your columns
const columnHelper = createColumnHelper<Person>();
const columns = [
  columnHelper.accessor('name', {
    header: 'Name',
    sortable: true,
  }),
  columnHelper.accessor('email', {
    header: 'Email',
  }),
];
 
// 3. Create your component
function SimpleTable() {
  const data = [
    { id: 1, name: 'John', email: 'john@example.com' },
    { id: 2, name: 'Jane', email: 'jane@example.com' },
  ];
 
  return (
    <TableGrid
      columns={columns}
      data={data}
      maxHeight="500px"
      variant="modern"
    />
  );
}

Features Overview 🎯

📝 Type Safety: Full TypeScript support to catch errors early
🔍 Search & Filter: Easy to add search functionality
↔️ Column Features: Resize, pin, hide, and reorder columns
📱 Responsive: Works great on all screen sizes
🚄 Virtual Scrolling: Handle large data efficiently
🎨 Easy to Style: Multiple built-in themes and custom styling
🌐 Server Integration: Built-in support for server-side data

Basic Usage

1. Setting Up Your Table

First, define your data type and create columns:

// 1. Define your data type
type User = {
  id: number;
  name: string;
  age: number;
};
 
// 2. Create columns with type safety
const columnHelper = createColumnHelper<User>();
const columns = [
  columnHelper.accessor('name', {
    header: 'Name',
  }),
  columnHelper.accessor('age', {
    header: 'Age',
  }),
];
 
// 3. Use the table
function MyTable() {
  const data = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
  ];
 
  return <TableGrid columns={columns} data={data} />;
}

2. Choose a Style

TableGrid comes with three beautiful styles:

// Modern style (default)
<TableGrid variant="modern" />
 
// Minimal style - clean and simple
<TableGrid variant="minimal" />
 
// Classic style - traditional look
<TableGrid variant="classic" />

3. Add Search Feature

Enable search with just one prop:

<TableGrid
  enableFiltering={true}
  fuzzySearchKeys={['name', 'email']} // Fields to search in
  fuzzySearchThreshold={0.3} // How strict the search should be (0 to 1)
/>

4. Make Columns Resizable

Let users adjust column widths:

<TableGrid
  enableColumnResize={true}
  columnResizeMode="onChange" // Updates as user drags
  columnResizeDirection="ltr" // Left-to-right resizing
/>

Advanced Features

1. Virtual Scrolling for Big Data

Handle thousands of rows efficiently:

<TableGrid
  virtualization={{
    enabled: true,
    rowHeight: 48, // Height of each row
    overscan: 5,   // Extra rows to render
    scrollingDelay: 150,
    onEndReached: () => {
      // Load more data when user scrolls to bottom
      loadMoreData();
    },
  }}
/>

2. Server-Side Data Loading

Work with data from your server:

<TableGrid
  serverSide={{
    enabled: true,
    totalRows: 1000,
    pageSize: 20,
    currentPage: 1,
    loading: false,
    onFetch: async ({ page, pageSize, sortColumn, sortDirection }) => {
      // Fetch your data from server
      const response = await fetchFromServer({
        page,
        pageSize,
        sort: { column: sortColumn, direction: sortDirection }
      });
      return response.data;
    },
  }}
/>

3. Custom Components

Make the table look exactly how you want:

<TableGrid
  components={{
    // Custom header
    Header: ({ column, sortIcon }) => (
      <div className="my-header">
        {column.header} {sortIcon}
      </div>
    ),
    
    // Custom cell
    Cell: ({ value }) => (
      <div className="my-cell">
        {value}
      </div>
    ),
    
    // Custom empty state
    EmptyState: () => (
      <div>No data found 😢</div>
    ),
    
    // Custom loading state
    LoadingState: () => (
      <div>Loading... ⌛</div>
    ),
    
    // Custom search box
    SearchInput: ({ value, onChange }) => (
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="Search..."
        className="my-search"
      />
    ),
  }}
/>

4. Easy Styling

Style your table with simple props:

<TableGrid
  styleConfig={{
    // Main container styles
    container: {
      className: 'my-table',
      style: { margin: '1rem' },
    },
    // Header styles
    header: {
      className: 'my-header',
      style: { fontWeight: 'bold' },
    },
    // Body styles
    body: {
      className: 'my-body',
      style: { fontSize: '14px' },
    },
  }}
/>

5. Scroll to Row

Use the table ref to scroll to specific rows:

function MyTable() {
  const tableRef = useRef<TableGridHandle>(null);
 
  const scrollToRow = () => {
    tableRef.current?.scrollTo(10); // Scroll to row index 10
  };
 
  return (
    <>
      <button onClick={scrollToRow}>Go to row 10</button>
      <TableGrid
        ref={tableRef}
        columns={columns}
        data={data}
      />
    </>
  );
}

Best Practices 💡

Start Simple: Begin with just columns and data, add features as needed
Use TypeScript: It helps catch errors early and provides better autocomplete
Enable Virtual Scrolling: For tables with more than 100 rows
Add Loading States: Always show loading indicators when fetching data
Responsive Design: Set appropriate maxHeight for different screen sizes
Error Handling: Always handle empty states and errors
Accessibility: Use meaningful labels and handle keyboard navigation

Table Grid

On this page