Table Body 📋

The TableBody component is responsible for rendering the main content area of your table. It handles displaying your data rows, loading states, and empty states in a clean and efficient way.

Features 🎯

📊 Efficient row rendering
⌛ Built-in loading states
🗑️ Empty state handling
🎨 Custom row rendering
🎭 With/without Tailwind styling
♿ Full accessibility support

Basic Usage

Here's a simple example of how to use TableBody:

import { TableBody } from '@shakibdshy/react-tablegrid';
 
function MyTableBody() {
  return (
    <TableBody
      tableInstance={tableInstance}
      className="my-table-body"
    />
  );
}

Props

Required Props

`tableInstance`

The table instance from useTableGrid hook that manages the table state.

const tableInstance = useTableGrid<YourDataType>({
  columns,
  data,
});
 
<TableBody tableInstance={tableInstance} />

Optional Props

`className`

Add custom CSS classes to the body container.

<TableBody className="custom-body" />

`style`

Add custom inline styles.

<TableBody style={{ maxHeight: '500px' }} />

`bodyRowClassName`

Add custom CSS classes to all rows.

<TableBody bodyRowClassName="custom-row" />

`bodyCellClassName`

Add custom CSS classes to all cells.

<TableBody bodyCellClassName="custom-cell" />

`components`

Override default components for loading and empty states.

<TableBody
  components={{
    LoadingState: () => <MyLoadingSpinner />,
    EmptyState: () => <MyEmptyState />,
  }}
/>

`customRender`

Custom render functions for different states and rows.

<TableBody
  customRender={{
    loading: () => <MyLoadingView />,
    empty: () => <MyEmptyView />,
    row: ({ row, rowIndex }) => <MyCustomRow row={row} index={rowIndex} />,
  }}
/>

`withoutTailwind`

Use without Tailwind CSS.

Type: boolean
Default: false

<TableBody withoutTailwind={true} />

States and Rendering

1. Loading State

The loading state is shown when data is being fetched:

// Default loading state
<TableBody tableInstance={tableInstance} />
 
// Custom loading component
<TableBody
  tableInstance={tableInstance}
  components={{
    LoadingState: () => (
      <div className="flex justify-center p-4">
        <MySpinner />
      </div>
    ),
  }}
/>
 
// Custom loading render function
<TableBody
  tableInstance={tableInstance}
  customRender={{
    loading: () => (
      <div className="loading-container">
        Loading your data...
      </div>
    ),
  }}
/>

2. Empty State

Shown when there's no data to display:

// Default empty state
<TableBody tableInstance={tableInstance} />
 
// Custom empty component
<TableBody
  tableInstance={tableInstance}
  components={{
    EmptyState: () => (
      <div className="text-center p-4">
        No data available
      </div>
    ),
  }}
/>
 
// Custom empty render function
<TableBody
  tableInstance={tableInstance}
  customRender={{
    empty: () => (
      <div className="empty-view">
        <EmptyIcon />
        <p>No results found</p>
      </div>
    ),
  }}
/>

3. Custom Row Rendering

Customize how each row is rendered:

<TableBody
  tableInstance={tableInstance}
  customRender={{
    row: ({ row, rowIndex }) => (
      <div className="custom-row">
        Row #{rowIndex}: {row.name}
      </div>
    ),
  }}
/>

Styling Guide

With Tailwind (Default)

<TableBody
  className="divide-y divide-gray-200"
  bodyRowClassName="hover:bg-gray-50"
  bodyCellClassName="px-4 py-2"
/>

Without Tailwind

<TableBody
  withoutTailwind={true}
  className="rtg-body"
  bodyRowClassName="rtg-body-row"
  bodyCellClassName="rtg-body-cell"
/>

Examples

Basic Table Body

function SimpleTableBody() {
  const tableInstance = useTableGrid<User>({
    columns,
    data: users,
  });
 
  return (
    <TableBody
      tableInstance={tableInstance}
      className="bg-white"
    />
  );
}

Custom Loading and Empty States

function CustomStatesBody() {
  return (
    <TableBody
      tableInstance={tableInstance}
      components={{
        LoadingState: () => (
          <div className="flex justify-center p-8">
            <LoadingSpinner size="lg" />
          </div>
        ),
        EmptyState: () => (
          <div className="text-center p-8">
            <EmptyIcon className="mx-auto h-12 w-12 text-gray-400" />
            <h3 className="mt-2 text-sm font-medium text-gray-900">No data</h3>
            <p className="mt-1 text-sm text-gray-500">
              Start by adding some data to your table.
            </p>
          </div>
        ),
      }}
    />
  );
}

Custom Row Rendering

function CustomRowBody() {
  return (
    <TableBody
      tableInstance={tableInstance}
      customRender={{
        row: ({ row, rowIndex }) => (
          <div className="flex items-center gap-4 p-4 hover:bg-gray-50">
            <Avatar src={row.avatar} />
            <div>
              <h3 className="font-medium">{row.name}</h3>
              <p className="text-sm text-gray-500">{row.email}</p>
            </div>
          </div>
        ),
      }}
    />
  );
}

Accessibility ♿

The TableBody component includes these accessibility features:

role="rowgroup": Identifies the element as a table body
aria-label: Provides context for screen readers
aria-busy: Indicates loading state
aria-live: Announces dynamic content changes
Proper row and cell roles

Best Practices 💡

Handle States: Always provide appropriate loading and empty states
Custom Rendering: Keep custom row renders simple and performant
Consistent Styling: Maintain consistent styling across rows
Error States: Handle error states gracefully
Mobile Support: Ensure content works well on small screens
Accessibility: Keep ARIA labels descriptive
Performance: Avoid unnecessary re-renders in custom components

Table Body

On this page