FxTable`

FxTable is a responsive data grid designed for web and desktop applications. It offers built-in sorting, sticky headers, and robust column definitions.

Usage

FxTable<User>(
  data: users, // List<User>
  columns: [
    FxTableColumn(
      header: "Name", 
      cellBuilder: (user) => Fx.text(user.name).bold(),
    ),
    FxTableColumn(
      header: "Status", 
      cellBuilder: (user) => FxBadge(label: user.status),
    ),
  ],
)

Features

Sticky Headers

The header row stays fixed at the top while scrolling, ensuring column context is always visible.

Custom Cells

Use cellBuilder to render complex widgets inside table cells.

FxTableColumn(
  header: "Actions",
  cellBuilder: (user) => Fx.button("Edit").onTap(() => edit(user)),
)

API Reference

Name	Type	Default	Description
`data`	`List<T>`	required	The list of data objects.
`columns`	`List<FxTableColumn<T>>`	required	List of column definitions.
`striped`	`bool`	`false`	Whether to stripe alternate rows.
`onRowTap`	`ValueChanged<T>?`	`null`	Callback for row selection.
`style`	`FxStyle?`	`null`	Custom table container style.
`headerStyle`	`FxStyle?`	`null`	Custom header row style.

The Master Table Implementation

An industrial audit log table with striped rows, status badges, and interactive actions.

class LogMonitorTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final logs = [
      AppLog(id: "L-101", module: "AUTH", msg: "Login Success", level: "info"),
      AppLog(id: "L-102", module: "DATA", msg: "Sync Interrupted", level: "warning"),
      AppLog(id: "L-103", module: "KERN", msg: "OOM Near-Miss", level: "danger"),
    ];

    return Fx.table<AppLog>(
      data: logs,
      striped: true,
      onRowTap: (log) => Fx.toast.info("Inspecting ${log.id}"),
      columns: [
        FxTableColumn(
          header: "Module",
          cellBuilder: (log) => Fx.text(log.module).bold().font.xs(),
        ),
        FxTableColumn(
          header: "Message",
          cellBuilder: (log) => Fx.text(log.msg).font.sm(),
        ),
        FxTableColumn(
          header: "Level",
          cellBuilder: (log) {
            final color = log.level == 'danger' ? Colors.red : 
                         log.level == 'warning' ? Colors.orange : Colors.blue;
            return Fx.badge(label: log.level.toUpperCase(), color: color);
          },
        ),
        FxTableColumn(
          header: "Control",
          cellBuilder: (log) => Fx.button("Audit").outline.sizeXs().onTap(() {}),
        ),
      ],
      style: FxStyle(
        bg: Colors.white,
        rounded: 16,
        border: Border.all(color: Colors.slate100),
        shadowSm: true,
      ),
      headerStyle: FxStyle(
        bg: Colors.slate50,
        p: 16,
      ),
    );
  }
}

Fluxy tables use a specialized virtualization engine that allows them to render thousands of rows with complex widgetry while maintaining a constant 60 FPS scroll performance.

FxTable