maxim-saplin / data_table_2

In-place substitute for Flutter's DataTable and PaginatedDataTable with fixed/sticky header and extra features
https://pub.dev/packages/data_table_2
BSD 3-Clause "New" or "Revised" License
202 stars 135 forks source link

Pub Version GitHub Tests Codecov

! Don't put the widgets inside unbounded parents. You don't need scrollables anymore (e.g. SingleChildScrollView) - widgets handle scrolling by theirselves. If you need a widget inside a Column(), wrap it into Expanded() or Flexible().

In-place substitute for Flutter's stock DataTable and PaginatedDataTable widgets with fixed/sticky header/top rows and left columns. A few useful features missing in the originals were added.

DataTable2 and PaginatedDataTable2 widgets are based on the sources of Flutter's originals, mimic the API and provide seamless integration.

If you've been using (or considered using) standard Flutter's widgets for displaying tables or data grids and missed the sticky headers (or vertical borders, 'No rows' placeholder, straightforward async data source API etc.) - you've come to the right place. No need to learn yet another API of a new control, just stick to well described DataTable and PaginatedDataTable.

LIVE DEMO

image

Please check the example folder which demonstrates various features of the widgets. There's also a DataGrid Sample in separate repo which is based on DataTable2.

Extra Features

Usage

**NOTE:*** don't put the widgets into any unconstrained parents with infinite width or height (e.g. scrollables such as SingleChildScrollView, Column etc.). The widgets are designed to stretch and fill all available space within parent and have a number of own scrollables inside to address fixed rows/columns feature. Putting it inside unconstrained parent break widgets.

  1. Add reference to pubspec.yaml.

  2. Import:

    import 'package:data_table_2/data_table_2.dart';
  3. Code:

    
    import 'package:data_table_2/data_table_2.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter/rendering.dart';

/// Example without a datasource class DataTable2SimpleDemo extends StatelessWidget { const DataTable2SimpleDemo();

@override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(16), child: DataTable2( columnSpacing: 12, horizontalMargin: 12, minWidth: 600, columns: [ DataColumn2( label: Text('Column A'), size: ColumnSize.L, ), DataColumn( label: Text('Column B'), ), DataColumn( label: Text('Column C'), ), DataColumn( label: Text('Column D'), ), DataColumn( label: Text('Column NUMBERS'), numeric: true, ), ], rows: List.generate( 100, (index) => DataRow(cells: [ DataCell(Text('A' (10 - index % 10))), DataCell(Text('B' (10 - (index + 5) % 10))), DataCell(Text('C' (15 - (index + 5) % 10))), DataCell(Text('D' (15 - (index + 10) % 10))), DataCell(Text(((index + 0.1) * 25.4).toString())) ]))), ); } }


If you're already using the standard widgets you can reference the package and add '2' to the names of stock widgets (making them **DataTable2** or **PaginatedDataTable2**) and that is it. 

##  Know issues/limitations/caveats
- There's no capability to size data table cells to fit contents. Column width's adapt to available width (either to parent width or `minWidth`), data rows width are predefined by constructor params. Content that doesn't fit a cell gets clipped
  - dataRowMinHeight and dataRowMaxHeight from the stock data table are also not supported
- There're no expanding/collapsing rows (drill-down scenarios), manually moving or resizing columns or rows, merging cells (i.e. HTML's colspan, rowspan)
- When fixing left columns, hovering over a row won't highlight entire row (should there be any tap handlers standard behavior is hovering a row changes it background)
 - Touch scrolling not working/jumping under mobile device emulation in Chrome (https://github.com/maxim-saplin/data_table_2/issues/100)
 - Cell and row tap events block `DataRow.onSelectChanged` event handler
 - In order to get checkbox column visible it is necessary to have `DataTable2.showCheckboxColumn` set to true AND there must be some rows with `onSelectChanged` event handler being not null
 - Paginated table's by default add empty rows should the page be larger than the number of available rows, can be changed via `renderEmptyRowsInTheEnd`
 - Golden tests can fail on Linux due to rendered images being different from the ones created on macOS and stored in the repo, PR @157