components/tables/flutstrap_table library Components Data Display

Flutstrap Table

A high-performance, customizable table component with Bootstrap-inspired styling, sorting, responsive behavior, and virtualization for large datasets.

Usage Examples

{@tool snippet}

Basic Table

FlutstrapTable<Map<String, dynamic>>(
  columns: [
    FSTableColumn(
      header: 'Name',
      accessor: 'name',
      sortable: true,
    ),
    FSTableColumn(
      header: 'Age',
      accessor: 'age',
      sortable: true,
    ),
  ],
  data: [
    {'name': 'John', 'age': 30},
    {'name': 'Jane', 'age': 25},
  ],
  variant: FSTableVariant.primary,
  responsive: FSTableResponsive.scroll,
)

Table with Custom Cell Rendering

FlutstrapTable<User>(
  columns: [
    FSTableColumn(
      header: 'User',
      cellBuilder: (user) => Text(user.name),
    ),
    FSTableColumn(
      header: 'Status',
      cellBuilder: (user) => Badge(
        text: user.isActive ? 'Active' : 'Inactive',
        variant: user.isActive ? FSBadgeVariant.success : FSBadgeVariant.secondary,
      ),
    ),
  ],
  data: users,
  striped: true,
  hover: true,
  onRowTap: (user) => _showUserDetails(user),
)

Virtualized Table with Large Dataset

FlutstrapTable<User>(
  columns: userColumns,
  data: largeUserList, // 10,000+ items
  virtualized: true,
  rowHeight: 56,
  onRowTap: (user) => _showUserDetails(user),
)

Responsive Table with Custom Breakpoints

FlutstrapTable<Product>(
  columns: productColumns,
  data: products,
  responsive: FSTableResponsive.collapse,
  emptyWidget: CustomEmptyState(),
  onRowDoubleTap: (product) => _quickEdit(product),
)

{@end-tool}

Performance Features

  • Smart Virtualization: Automatic for large datasets with configurable thresholds
  • Value Caching: Cell values cached to prevent expensive recalculations
  • Efficient Sorting: Optimized with Schwartzian transform for expensive operations
  • Memory Management: LRU cache eviction and proper resource disposal
  • Batch Rendering: Configurable batch sizes for smooth scrolling

Accessibility

  • Full screen reader support with semantic labels
  • Keyboard navigation support
  • Focus management for interactive rows
  • Proper ARIA attributes for web

Responsive Behavior

  • Scroll: Horizontal scrolling on small screens (default)
  • Collapse: Transforms to card layout on mobile (<480px)
  • Stacked: Stacks columns vertically on tablet (<768px)
  • None: No responsive adaptation

Performance Tips

  • Use virtualized: true for datasets > 50 items
  • Implement efficient cellBuilder for complex cells
  • Use accessor for simple text fields instead of cellBuilder
  • Consider using const for column definitions when possible

Classes

FlutstrapTable<T>
Flutstrap Table
FSTableColumn<T>
Table Column Definition
FSTableConfig
Flutstrap Table Configuration

Enums

FSTableResponsive
Flutstrap Table Responsive Behavior
FSTableSize
Flutstrap Table Size
FSTableVariant
Flutstrap Table Variants