Basic Table Example

This example demonstrates how to create a basic table using React Table Grid. It's the perfect starting point for beginners to understand the core concepts.

Overview

The basic table example shows how to:

• Set up a basic table structure
• Define typed columns
• Handle basic state changes
• Configure table height

Example

Step-by-Step Guide

1. Define Data Types

First, define the shape of your data using TypeScript:

type DataItem = {
  id: number;
  name: string;
  age: number;
  email: string;
};

2. Create Column Helper

Use createColumnHelper to get type-safe column definitions:

const columnHelper = createColumnHelper<DataItem>();

3. Define Columns

Create your column definitions using the column helper:

const columns: Column<DataItem>[] = [
  columnHelper.accessor("name", {
    header: "Name",
    sortable: false,
  }),
  // ... more columns
];

4. Create Table Component

Implement the table component with the required props:

<TableGrid
  columns={columns}
  data={data}
  maxHeight="400px"
/>

Core Props Explained

Basic Customization

1. Styling

Add basic styling using the styleConfig prop:

<TableGrid
  styleConfig={{
    container: {
      className: "border rounded-lg shadow-sm",
    },
    row: {
      className: "hover:bg-gray-50",
    },
  }}
/>

2. Height Configuration

Control table height:

<TableGrid
  maxHeight="400px"  // Fixed height
  // or
  maxHeight="100vh"  // Viewport relative
/>

State Management

Basic State Tracking

Monitor table state changes:

<TableGrid
  onStateChange={(state) => {
    console.log("Current state:", state);
    // Access:
    // - state.data (current data)
    // - state.sortColumn (current sort column)
    // - state.sortDirection (current sort direction)
  }}
/>

Best Practices

1. Type Safety

   • Always define proper TypeScript interfaces
   • Use createColumnHelper for type-safe columns

2. Performance

   • Keep data structures flat when possible
   • Avoid unnecessary re-renders
   • Consider memoization for large datasets

3. Code Organization

   • Separate column definitions from component logic
   • Use consistent naming conventions
   • Document complex configurations

Common Issues and Solutions

Table Not Rendering

If the table isn't rendering:

1. Check that columns and data props are properly defined
2. Verify data structure matches column accessors
3. Ensure container has proper dimensions

Type Errors

If you're getting TypeScript errors:

1. Verify your data type definitions
2. Check column accessor keys match data properties
3. Ensure proper generic types are passed to components

Related Examples

• Column Resizing
• Column Pinning
• Customized Table
• Virtualized Table