Getting Started

React Table Grid is a powerful, flexible, and fully-featured table component for React applications. It provides a rich set of features while maintaining excellent performance and ease of use.

Key Features

🎯 Type-safe: Built with TypeScript for better development experience
🚀 High Performance: Virtual scrolling for handling large datasets
🎨 Customizable: Extensive styling and component customization options
📱 Responsive: Works seamlessly across different screen sizes
♿ Accessible: Built with accessibility in mind

Installation

Install the package

Choose your preferred package manager:

npm install @shakibdshy/react-tablegrid
# or
yarn add @shakibdshy/react-tablegrid
# or
pnpm add @shakibdshy/react-tablegrid
# or
bun add @shakibdshy/react-tablegrid

Import the CSS styles

// Method 1: Import styles
import '@shakibdshy/react-tablegrid/styles';
 
// OR Method 2: Import CSS file directly
import '@shakibdshy/react-tablegrid/dist/table-grid.css';

Setup Tailwind CSS

Add the plugin to your Tailwind CSS configuration:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ... your content configuration
    "node_modules/@shakibdshy/react-tablegrid/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [
    // ... other plugins
  ],
};

Basic Usage

Here's a simple example to get you started:

import { Column, TableGrid } from '@shakibdshy/react-tablegrid';
 
const data = [
  { name: 'John Doe', age: 25 },
  { name: 'Jane Smith', age: 30 },
];
 
interface DataItem {
  name: string;
  age: number;
}
 
const columns: Column<DataItem>[] = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
  },
  {
    id: 'age',
    header: 'Age',
    accessorKey: 'age',
  },
];
 
function App() {
  return (
    <TableGrid
      columns={columns}
      data={data}
    />
  );
}

Core Concepts

1. Column Definition

Columns can be defined in two ways:

// Method 1: Using createColumnHelper (Recommended)
const columnHelper = createColumnHelper<Person>();
const columns = [
  columnHelper.accessor('name', {
    header: 'Name',
    sortable: true,
  }),
];
 
// Method 2: Direct definition
const columns = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
    sortable: true,
  },
];

2. Basic Props

Essential props to get started:

<TableGrid
  // Required props
  columns={columns}  // Column definitions
  data={data}       // Data array
  // Common optional props
  maxHeight="400px"           // Table height
  enableFiltering={true}      // Enable search
  enableColumnResize={true}   // Enable column resize
/>

3. Styling

The table comes with built-in Tailwind CSS styles:

<TableGrid
  styleConfig={{
    header: {
      className: 'bg-gray-100 font-bold',
      headerRowClassName: 'bg-gray-100 font-bold',
    },
    body: {
      className: 'hover:bg-gray-50',
    },
    utilityStyles: {
      searchContainerClassName: 'px-4 py-2',
    },
  }}
/>

4. Event Handling

Handle table events using the events prop:

<TableGrid
  columns={columns}
  data={data}
  events={{
    onSort: (column, direction) => {
      console.log(`Sorting ${column.id} in ${direction} order`);
    },
    onFilter: (value, filteredData) => {
      console.log('Filtering with:', value);
    },
  }}
/>

5. State Management

Control table state for advanced use cases:

function ControlledTable() {
  const [state, setState] = useState({
    sortColumn: 'name',
    sortDirection: 'asc',
    filterValue: '',
  });
 
  return (
    <TableGrid
      columns={columns}
      data={data}
      state={state}
      onStateChange={setState}
    />
  );
}

Next Steps

Now that you understand the basics, you can:

Try the Basic Table example
Learn about Sorting and Filtering
Explore Column Features
Check out Advanced Features

TypeScript Support

React Table Grid is built with TypeScript and provides excellent type safety:

// Your table is fully typed
const MyTable = <T extends Record<string, unknown>>() => {
  return (
    <TableGrid<T>
      columns={columns}
      data={data}
    />
  );
};

Common Patterns

1. Custom Cell Rendering

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

2. Async Data Loading

function AsyncTable() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    fetchData().then(result => {
      setData(result);
      setLoading(false);
    });
  }, []);
 
  return (
    <TableGrid
      columns={columns}
      data={data}
      isLoading={loading}
    />
  );
}

Features

Modern UI

Beautiful and responsive design with Tailwind CSS styling

Virtualization

Efficient rendering of large datasets with virtualized scrolling

Column Management

Resizing, pinning, and visibility control for columns

Advanced Sorting

Multi-column sorting with custom sort functions

Filtering

Built-in search and custom filter functions

Customization

Extensive styling options and component customization

Best Practices

Use createColumnHelper for type-safe columns
Implement proper loading states
Consider virtualization for large datasets
Provide meaningful aria labels
Handle errors gracefully