S360fTable class

A customizable data table widget that provides responsive layout, scrolling capabilities, and sortable headers.

The S360fTable widget creates a responsive table that automatically switches between fixed-width and scrollable layouts based on screen size and number of columns.

Features:

• Sortable Headers: Support for clickable sortable column headers with visual indicators
• Responsive Layout: Automatically adapts to different screen sizes
• Flexible Column Sizing: Custom flex values for controlling column widths
• Action Column: Dedicated column for row-specific operations (always 100px wide)
• Row Interaction: Tap callback for row-level interactions
• Skeleton Loading: Built-in skeleton loading support for headers
• Custom Styling: Themed appearance using S360f design system
• Horizontal Scrolling: Automatic scrollbar for large tables
• Minimum Width Constraint: Optional minWidth to prevent table from shrinking below a specified width

Layout Behavior:

• Scrollable Layout
• Column Sizing: Base width calculated as screen width / number of columns
• Auto-sizing Columns: Use -1 in columnFlex for expandable columns

Example usage:

S360fTable(
  tableHeaders: [
    S360fTableHeader(
      title: 'Name',
      isSortable: true,
      sortOrder: SortOrder.ascending,
      onSort: () => sortByName(),
    ),
    S360fTableHeader(title: 'Email'),
    S360fTableHeader(
      title: 'Status',
      isSortable: true,
      sortOrder: SortOrder.none,
      onSort: () => sortByStatus(),
    ),
    S360fTableHeader(title: 'Actions'),
  ],
  dataCount: users.length,
  tableDataBuilder: (index) => [
    Text(users[index].name),
    Text(users[index].email),
    Chip(label: Text(users[index].status)),
  ],
  actionsBuilder: (index) => Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      IconButton(
        icon: Icon(Icons.edit),
        onPressed: () => editUser(users[index]),
      ),
      IconButton(
        icon: Icon(Icons.delete),
        onPressed: () => deleteUser(users[index]),
      ),
    ],
  ),
  onTap: (index) => viewUserDetails(users[index]),
  columnFlex: [2.0, 3.0, 1.5, 1.0], // Last value ignored for actions column
  minWidth: 800, // Optional: prevents table from shrinking below 800px
)