在线演示：https://rodydavis.github.io/data_tables/

data_tables #

• 全屏分页数据表格（适用于平板电脑/桌面）
• 移动列表视图带排序和全选按钮
• 支持暗模式
• 从Json加载数据

开始使用 #

• 你可以选择性地为移动端构建一个列表视图。默认情况下，它会创建一个带有剩余列作为子项的ExpansionTile。

• 平板电脑断点也可以设置。

  bool showMobileListView; - 设置为false时，将始终显示数据表格

  int sortColumnIndex; - 当前排序列

  bool sortAscending; - 排序顺序

  ValueChanged<bool> onSelectAll; - 全选和取消全选时的回调

  ValueChanged<int> onRowsPerPageChanged; - 行数改变时的回调

  int rowsPerPage; - 每页默认行数

  Widget header; - 桌面和平板数据表格的表头

  List<DataColumn> columns; - 列列表（必须与DataSource中的DataCells长度匹配）

  IndexedWidgetBuilder mobileItemBuilder; - 移动端列表视图的可选项目构建器

  Size tabletBreakpoint; - 屏幕宽度和高度的平板断点

  List<Widget> actions, selectedActions; - 当项目被选中或未选中时显示的操作

  RefreshCallback onRefresh; - 如果不为空，则列表视图将被包裹在一个RefreshIndicator中

截图 #

完整示例Demo

import 'package:flutter/material.dart';
import 'package:data_tables/data_tables.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('data_tables 示例')),
        body: DataTablesExample(),
      ),
    );
  }
}

class DataTablesExample extends StatefulWidget {
  [@override](/user/override)
  _DataTablesExampleState createState() => _DataTablesExampleState();
}

class _DataTablesExampleState extends State<DataTablesExample> {
  int _sortColumnIndex = 0;
  bool _sortAscending = true;

  List<Map<String, dynamic>> _rows = [
    {'name': 'Alice', 'age': 25, 'city': 'New York'},
    {'name': 'Bob', 'age': 30, 'city': 'Los Angeles'},
    {'name': 'Charlie', 'age': 35, 'city': 'Chicago'},
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DataTables(
      sortColumnIndex: _sortColumnIndex,
      sortAscending: _sortAscending,
      columns: [
        DataColumn(label: Text('Name')),
        DataColumn(label: Text('Age')),
        DataColumn(label: Text('City')),
      ],
      rows: _rows.map((row) {
        return DataRow(cells: [
          DataCell(Text(row['name'])),
          DataCell(Text('${row['age']}')),
          DataCell(Text(row['city'])),
        ]);
      }).toList(),
      onSort: (columnIndex, ascending) {
        setState(() {
          _sortColumnIndex = columnIndex;
          _sortAscending = ascending;
          // 在这里添加你的排序逻辑
        });
      },
      onSelectAll: (selected) {
        // 全选或取消全选的逻辑
      },
      onRowsPerPageChanged: (value) {
        // 行数改变的逻辑
      },
      rowsPerPage: 5,
      header: Text('用户信息'),
      actions: [
        IconButton(
          icon: Icon(Icons.refresh),
          onPressed: () {
            // 刷新数据的逻辑
          },
        ),
      ],
      selectedActions: [
        IconButton(
          icon: Icon(Icons.delete),
          onPressed: () {
            // 删除选中项目的逻辑
          },
        ),
      ],
    );
  }
}