如何在Flutter的flutter_web_data_table中为表格行添加按钮？

要在flutter_web_data_table的行中添加编辑、打印、查看按钮，你可以通过自定义数据源类实现，具体步骤如下：

1. 自定义WebDataTableSource子类 #

继承WebDataTableSource并重写getRow方法，完全控制每一行的单元格内容，包括添加操作按钮：

class CustomDataSource extends WebDataTableSource {
  final List<Map<String, dynamic>> rows;
  final List<WebDataColumn> columns;

  CustomDataSource({
    required this.rows,
    required this.columns,
    required bool sortAscending,
    String? sortColumnName,
  }) : super(
          sortAscending: sortAscending,
          sortColumnName: sortColumnName,
          columns: columns,
          rows: rows,
        );

  @override
  DataRow getRow(int index) {
    final currentRow = rows[index];
    return DataRow.byIndex(
      index: index,
      cells: columns.map((column) {
        // 处理操作列
        if (column.name == 'actions') {
          return DataCell(
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextButton(
                  onPressed: () => _viewOrder(currentRow),
                  child: const Text('查看'),
                ),
                TextButton(
                  onPressed: () => _editOrder(currentRow),
                  child: const Text('编辑'),
                ),
                TextButton(
                  onPressed: () => _printOrder(currentRow),
                  child: const Text('打印'),
                ),
              ],
            ),
          );
        }
        // 其他列按原有逻辑渲染
        return column.dataCell(currentRow[column.name]);
      }).toList(),
    );
  }

  // 查看订单逻辑
  void _viewOrder(Map<String, dynamic> row) {
    // 可添加打开详情页等逻辑，row包含当前行所有数据
    print('查看订单：${row['invoice_no']}');
  }

  // 编辑订单逻辑
  void _editOrder(Map<String, dynamic> row) {
    print('编辑订单：${row['invoice_no']}');
  }

  // 打印订单逻辑
  void _printOrder(Map<String, dynamic> row) {
    print('打印订单：${row['invoice_no']}');
  }
}

2. 修改WebDataTable配置 #

在列配置中添加操作列，并使用自定义的CustomDataSource作为数据源：

WebDataTable(
  initialFirstRowIndex: 0,
  rowsPerPage: 12,
  source: CustomDataSource(
    sortAscending: true,
    sortColumnName: '_id',
    columns: [
      WebDataColumn(
        sortable: true,
        name: '_id',
        label: const Text('Sr. No'),
        dataCell: (value) => DataCell(Text('$value')),
      ),
      WebDataColumn(
        name: 'invoice_no',
        label: const Text('Invoice No'),
        dataCell: (value) => DataCell(Text('$value')),
      ),
      WebDataColumn(
        name: 'counter',
        label: const Text('Counter Name'),
        dataCell: (value) => DataCell(Text('$value')),
      ),
      WebDataColumn(
        name: 'customer',
        label: const Text('Customer Name'),
        dataCell: (value) => DataCell(Text('$value')),
      ),
      WebDataColumn(
        name: 'customer_type',
        label: const Text('Customer Type'),
        dataCell: (value) => DataCell(Text('$value')),
      ),
      WebDataColumn(
        name: 'date',
        label: const Text('Date & Time'),
        dataCell: (value) => DataCell(Text('$value')),
      ),
      WebDataColumn(
        name: 'qty',
        label: const Text('Qty'),
        dataCell: (value) => DataCell(Text('$value')),
        sortable: true,
      ),
      WebDataColumn(
        name: 'grand_total',
        label: const Text('Grand Total'),
        dataCell: (value) => DataCell(Text('$value')),
        sortable: true,
      ),
      // 添加操作列
      WebDataColumn(
        name: 'actions',
        label: const Text('操作'),
        dataCell: (value) => DataCell(Container()), // 占位用，实际由CustomDataSource渲染
      ),
    ],
    rows: data,
  ),
  header: const Text('订单列表'),
)

原理说明 #

通过自定义数据源类，绕过默认数据源对单元格的限制，直接控制每一行的渲染逻辑，既保留原包的所有特性，又能灵活添加自定义Widget（如操作按钮），还可直接获取当前行完整数据用于后续业务逻辑处理。

内容的提问来源于stack exchange，提问作者Swapnil Mane