Flutter数据表格展示插件operance_datatable的使用

Flutter数据表格展示插件OperanceDataTable的使用

OperanceDataTable 是一个功能强大、灵活且高度可定制的数据表格组件，适用于 Flutter 应用程序。它提供了一整套丰富的特性，使得展示和交互表格数据变得轻而易举，并提供了卓越的开发体验。

特性

• 轻松的数据处理：内置分页和无限滚动支持，轻松管理并展示大数据集。
• 高级排序：支持多列排序，可自定义排序图标和行为。
• 灵活搜索：实现强大的搜索功能，可自定义搜索字段装饰、位置和行为。
• 行选择：允许用户单选或多选行，可自定义选择行为。
• 展开行：创建具有展开行的互动表格，用于额外详情或嵌套数据。
• 列重新排序：允许用户重新排列列，以个性化数据视图。
• 高度可定制：可以调整表格的每个方面，以匹配应用程序的设计和需求。
• 响应式设计：自动适应不同的屏幕尺寸和方向。
• 键盘导航：增强可访问性，内置键盘导航支持。
• 主题支持：轻松与应用的主题集成，保持一致的外观和感觉。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  operance_datatable: ^1.0.6

然后运行：

flutter pub get

使用

首先，在你的 Dart 文件中导入 OperanceDataTable 包：

import 'package:operance_datatable/operance_datatable.dart';

接着，可以在 Flutter 应用中创建一个 OperanceDataTable 小部件：

OperanceDataTable<YourDataType>(
  columns: [
    // 定义你的列
  ],
  onFetch: (limit, sort, {bool isInitial = true}) async {
    // 实现你的数据获取逻辑
  },
  // 添加更多配置选项
)

示例

以下是一个更完整的 OperanceDataTable 使用示例：

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

class OperanceDataTablePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('OperanceDataTable 示例')),
      body: OperanceDataTable<Pokemon>(
        onFetch: (limit, sort, {bool isInitial = true}) async {
          if (isInitial) {
            final pokemon = await PokeApi.fetchPokemon(
              limit: limit,
              sort: sort?.map((key, value) => MapEntry(key, value == SortDirection.ascending)),
            );

            return (pokemon, PokeApi.hasNextPage);
          } else {
            final pokemon = await PokeApi.fetchMore(limit: limit);

            return (pokemon, PokeApi.hasNextPage);
          }
        },
        columns: [
          OperanceDataColumn<Pokemon>(
            name: 'id',
            sortable: true,
            columnHeader: Text('ID'),
            cellBuilder: (context, item) => Text(item.id.toString()),
            numeric: true,
            getValue: (item) => item.id,
            width: const OperanceDataColumnWidth(factor: 0.1),
          ),
          OperanceDataColumn<Pokemon>(
            name: 'name',
            sortable: true,
            columnHeader: Text('Name'),
            cellBuilder: (context, item) => Text(item.name),
            getValue: (item) => item.name,
            getSearchableValue: (item) => item.name,
            width: const OperanceDataColumnWidth(factor: 0.25),
          ),
          OperanceDataColumn<Pokemon>(
            name: 'forms',
            sortable: true,
            columnHeader: Text('Forms'),
            cellBuilder: (context, item) => Text(
              item.forms.map((form) => form.name).join(', '),
            ),
          ),
          OperanceDataColumn<Pokemon>(
            name: 'abilities',
            columnHeader: Text('Abilities'),
            cellBuilder: (context, item) => Text(
              item.abilities.map((ability) => ability.ability.name).join(', '),
            ),
          ),
          OperanceDataColumn<Pokemon>(
            name: 'type',
            columnHeader: Text('Type'),
            cellBuilder: (context, item) => Text(
              item.types.map((type) => type.type.name).join(', '),
            ),
          ),
          OperanceDataColumn<Pokemon>(
            name: 'weight',
            sortable: true,
            columnHeader: Text('Weight'),
            cellBuilder: (context, item) => Text(item.weight.toString()),
            numeric: true,
            width: const OperanceDataColumnWidth(factor: 0.1),
          ),
          OperanceDataColumn<Pokemon>(
            name: 'height',
            sortable: true,
            columnHeader: Text('Height'),
            cellBuilder: (context, item) => Text(item.height.toString()),
            numeric: true,
            width: const OperanceDataColumnWidth(size: 400.0),
          ),
        ],
        expansionBuilder: (pokemon) {
          return SizedBox(
            height: 100.0,
            child: Wrap(
              spacing: 8.0,
              children: [
                Image.network(pokemon.sprites.frontDefault),
                Image.network(pokemon.sprites.backDefault),
                Image.network(pokemon.sprites.frontShiny),
                Image.network(pokemon.sprites.backShiny),
              ],
            ),
          );
        },
        expandable: true,
        selectable: true,
        searchable: true,
        showHeader: true,
        showEmptyRows: true,
        showRowsPerPageOptions: true,
        allowColumnReorder: true,
      ),
    );
  }
}

自定义

OperanceDataTable 提供了通过 OperanceDataDecoration 类进行广泛定制的选项。你可以自定义颜色、图标、大小、样式和 UI 行为。例如，你可以这样定制表格的外观：

OperanceDataTable<YourDataType>(
  // ... 其他属性
  decoration: OperanceDataDecoration(
    colors: OperanceDataColors(
      headerColor: Colors.blue[100],
      rowColor: Colors.white,
      rowHoverColor: Colors.blue[50],
    ),
    icons: OperanceDataIcons(
      columnHeaderSortAscendingIcon: Icons.arrow_upward,
      columnHeaderSortDescendingIcon: Icons.arrow_downward,
    ),
    sizes: OperanceDataSizes(
      headerHeight: 70.0,
      rowHeight: 60.0,
    ),
    styles: OperanceDataStyles(
      searchDecoration: InputDecoration(
        hintText: 'Search...',
        prefixIcon: Icon(Icons.search),
        border: OutlineInputBorder(),
      ),
    ),
    ui: OperanceDataUI(
      animationDuration: 300,
      rowsPerPageOptions: [10, 20, 50, 100],
      searchPosition: SearchPosition.left,
    ),
  ),
)