Table

Tables are used to organize and present data efficiently in applications. They provide features like sorting, filtering, pagination, and various display modes to handle complex data representations effectively.

<Table variant='default' mode='light' columns={columns} data={data} />

Usage

import { Avatar } from 'bio-bind-ui';

import { Table } from 'bio-bind-ui';
 
function MyComponent() {
  return (
    <Table
      columns={[
        {
          header: 'Name',
          accessorKey: 'name',
        },
        {
          header: 'Age',
          accessorKey: 'age',
        },
      ]}
      data={[
        { name: 'John Doe', age: 30 },
        { name: 'Jane Smith', age: 25 },
      ]}
    />
  );
}

Examples

Default Table

Basic table with standard configuration.

<Table variant='default' mode='light' columns={columns} data={data} />

With Pagination

Table with server-side pagination support.

<Table
  variant='default'
  mode='light'
  showPagination={true}
  paginationOptions={{
    showPerPage: true,
    limitOption: [10, 20, 50],
    totalPage: 5,
    page: 1,
    pageSize: 10,
    onChangePage: (page) => console.log('Page changed:', page),
    onChangeLimit: (limit) => console.log('Limit changed:', limit),
  }}
  columns={columns}
  data={data}
/>

With Filtering

Table with column filtering capabilities.

<Table
  variant='default'
  mode='light'
  columns={[
    {
      header: 'Name',
      accessorKey: 'name',
      enableGlobalFilter: true,
      meta: {
        filterVariant: 'text',
      },
    },
    {
      header: 'Status',
      accessorKey: 'status',
      enableGlobalFilter: true,
      meta: {
        filterVariant: 'select',
        options: [
          { label: 'Active', value: 'active' },
          { label: 'Inactive', value: 'inactive' },
        ],
      },
    },
  ]}
  data={data}
  onFilter={(filters) => console.log('Filters:', filters)}
/>

With Row Selection

Table with selectable rows.

<Table
  variant='default'
  mode='light'
  selectedRow={true}
  columns={columns}
  data={data}
  onSelectedRow={(selected) => console.log('Selected rows:', selected)}
/>

With Variant Colored

Table with variant colored

<Table
  variant='colored'
  mode='light'
  selectedRow={}
  columns={columns}
  data={data}
/>

With Infinite Scroll

Table with infinite scroll loading.

<Table
  variant='default'
  mode='light'
  infinity={true}
  columns={columns}
  data={data}
/>

Props

Column Definition

Columns are defined using the ColumnDef type from @tanstack/react-table. Here are the key properties:

interface ColumnDef {
  header: string;
  accessorKey: string;
  size?: number;
  enableSorting?: boolean;
  enableGlobalFilter?: boolean;
  meta?: {
    filterVariant: 'text' | 'select' | 'range';
    options?: Array<{ label: string; value: string | number }>;
  };
}

Pagination Options

Configuration for server-side pagination:

interface PaginationOptions {
  showPerPage: boolean;
  limitOption?: number[];
  totalPage: number;
  page: number;
  pageSize: number;
  onChangePage: (page: number) => void;
  onChangeLimit: (limit: number) => void;
}

Filter Types

The table supports three types of filters:

1. Text Filter: Free text search
2. Select Filter: Dropdown selection from predefined options
3. Range Filter: Date range selection

Styling

The table supports two themes (light and dark) and three variants:

• default: Standard table design
• neutral: Minimalist design
• colored: Enhanced visual hierarchy with colored rows

Accessibility

The table component is built with accessibility in mind:

• Proper ARIA labels
• Keyboard navigation support
• Screen reader friendly markup
• High contrast mode support

Best Practices

1. Performance

   • Use client-side operations for small datasets
   • Implement server-side operations for large datasets
   • Enable infinite scroll for large datasets with frequent updates

2. Responsive Design

   • Consider column visibility on different screen sizes
   • Use appropriate column widths
   • Implement horizontal scrolling for many columns

3. Data Loading

   • Show loading state during data fetching
   • Provide meaningful empty states
   • Handle errors gracefully

4. Filtering

   • Choose appropriate filter types for each column
   • Implement debouncing for text filters
   • Provide clear filter indicators