scrollable_table_view 1.0.0

This is a multi axis scrollable data table, that allows you to scroll on both the vertical and horizontal axis, with the header remaining static on the vertical axis.

This is a multi axis scrollable data table, that allows you to scroll on both the vertical and horizontal axis, with the header remaining static on the vertical axis. Please look at the demo below.

Features

Demo

This widget serves the same purpose as a DataTable, with the advantage that it can scroll in both the horizontal and vertical axis, while maintaining the vertical position of the header.

Getting started

Simply add into your dependencies the following line.

dependencies:
  scrollable_table_view: <latest-version>

Usage

ScrollableTableView(
  columns: [
    "product_id",
    "product_name",
    "price",
  ].map((column) {
    return TableViewColumn(
      label: column,
    );
  }).toList(),
  rows: [
    ["PR1000", "Milk", "20.00"],
    ["PR1001", "Soap", "10.00"],
  ].map((record) {
    return TableViewRow(
      height: 60,
      cells: record.map((value) {
        return TableViewCell(
          child: Text(value),
        );
      }).toList(),
    );
  }).toList(),
);

Pagination

Pagination is supported from version 1.0.0-beta. First, initialize a PaginationController as follows:

final PaginationController paginationController = PaginationController(
    rowCount: many_products.length,
    rowsPerPage: 10,
  );

Next, initialize your table and pass the pagination controller to the paginationController parameter:

ScrollableTableView(
  paginationController: paginationController,
  columns: columns.map((column) {
    return TableViewColumn(
      label: column,
    );
  }).toList(),
  rows: many_products.map((product) {
    return TableViewRow(
      height: 60,
      cells: columns.map((column) {
        return TableViewCell(
          child: Text(product[column] ?? ""),
        );
      }).toList(),
    );
  }).toList(),
)

With the above setup, navigate forward and backwards using paginationController.next() and paginationController.backwards() respectively. To jump to a page directly, use paginationController.jumpTo(pageToJumpTo).

For the full example, go to the main.dart file in the example project.

Additional information

GitHub Repo: https://github.com/herbertamukhuma/scrollable_table_view Raise Issues and Feature requests: https://github.com/herbertamukhuma/scrollable_table_view/issues

Common Issues

1. Loading too many records: As with any list of values/records, adding too many records to the underlying model will overwhelm you app. Remember that this table will load all the rows in your model, whether they are visible on the screen or not. This is unlike other widgets like the ListView.builder which only paints items when they are scrolled into view. In this regard, only load a few records at a time by implementing your own pagination. My recommendation would be 20 - 30 records in mobile apps, and up to 50 for web apps. You can do your own tests to see how many your app can handle without stuttering.