The scrollable_table_view from herbertamukhuma

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.

Note

For more complex features like freezing columns and rows, kindly take a look at the data_table_2 package

Getting started

Simply add into your dependencies the following line.

dependencies:
  scrollable_table_view: <latest-version>

Usage

ScrollableTableView(
  headers: [
    "product_id",
    "product_name",
    "price",
  ].map((label) {
    return TableViewHeader(
      label: label,
    );
  }).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,
  headers: labels.map((label) {
    return TableViewHeader(
      label: label,
    );
  }).toList(),
  rows: many_products.map((product) {
    return TableViewRow(
      height: 60,
      cells: labels.map((label) {
        return TableViewCell(
          child: Text(product[label] ?? ""),
        );
      }).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

Loading too many records: From version 1.0.0-beta, pagination has been implemented. Kindly use this to avoid loading too many records at a time, which will inturn overwhelm your app.

current page in Pagination did not change

I am using provider as a state Management,and the following is my code:

` Widget build(BuildContext context) {
print("Build PaginationController");
final p = context.watch();
PaginationController _paginationController=PaginationController(
rowCount: p.data.isEmpty ? 16 : p.data.length,
rowsPerPage:ItemUtils.calculateMaxRows(context),
);
return Scaffold(
body: Column(
children: [
PosHeaderBuilder(
code: widget.code,
dataLength: p.data.length,
icon: widget.iconData,
title: p.title,
onSearch: (x) async {
if (x.isNotEmpty) {
var c = p.data.where((e) =>
e.name!.contains(x) || e.id.toString().contains(x));
p.data = (c.toList());
} else {
await p.loadList();
}
p.refresh();
},
onRefresh: p.init,
context: context,
),
Divider(height: 2, thickness: 0.5),
Expanded(
child: ScrollableTableView(
// paginationController: _paginationController(p, context),
paginationController: _paginationController,
rowDividerHeight: 3,
headerBackgroundColor: kBackgroundColor,
headers: ItemUtils.generateHeaderList(widget.code, p).map((column) {
return TableViewHeader(
textStyle: TextStyle(
fontWeight: FontWeight.w700,
fontFamily: 'OpenSans',
color: Colors.black,
fontSize: 18,
),
minWidth: 80,
width: 150,
label: column,
);
}).toList(),
rows: !p.isLoading
? p.data.map((item) {
return TableViewRow(
height: 30,
cells: [
TableViewCell(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Text(
(p.data.indexOf(item) + 1).toString()?? '',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
TableViewCell(
child: Text(
item.itemNo ?? '-',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
TableViewCell(
child: Text(
item.name ?? '-',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
TableViewCell(
child: Text(
Instance.warehouses
.firstWhere(
(e) => e.id == item.warehouseId,
orElse: () => Warehouse(),
)
.title ??
'-',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
TableViewCell(
child: Text(
Instance.classifications
.firstWhere(
(e) => e.id == item.classificationId,
orElse: () => Classification(),
)
.title ??
'-',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
TableViewCell(
child: Text(
item.count?.toString() ?? '-',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
TableViewCell(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Checkbox(
value: item.isFavorite ?? false,
onChanged: (x) {
// p.isFavorite = (x)!;
if (isEdit(widget.code)) {
item?.isFavorite = x;
HelpPos.changeStatus(context, p, item,
callBack: (x) async {
await HiveRepository.addItemsCashing(
convertItemToLocal([item]));
await p.loadList();
p.refresh();
});
}
}),
),
),
TableViewCell(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Checkbox(
value: item.status ?? false,
onChanged: (x) {
if (isEdit(widget.code)) {
item.status = x!;
HelpPos.changeStatus(context, p, item,
callBack: (x) async {
await HiveRepository.addItemsCashing(
convertItemToLocal([item]));
await p.loadList();
p.refresh();
});
}
}),
),
),
TableViewCell(
child: Responsive.isDesktop(context)
? Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
if (isEdit(widget.code))
transactionEntity(
onTap: () => p.edit(context, item),
icon: Icons.edit,
),
SizedBox(width: 5),
if (isDelete(widget.code))
transactionEntity(
onTap: () =>
p.delete(context, item),
icon: Icons.delete,
),
transactionEntity(
onTap: () => p.showS(context, item),
icon: Icons.info,
),
],
)
: buildPopupMenuActions([
if (isEdit(widget.code))
buildPopupMenuItem(
title: 'تعديل',
iconData: Icons.edit,
onClick: () => p.edit(context, item),
context: context,
),
if (isDelete(widget.code))
buildPopupMenuItem(
title: 'حذف',
iconData: CupertinoIcons.delete,
onClick: () =>
p.delete(context, item),
context: context,
),
buildPopupMenuItem(
title: 'تفاصيل الصنف',
iconData: CupertinoIcons.info,
onClick: () => p.showS(context, item),
context: context,
),
]),
),
],
);
}).toList()
: generateShimmerLoading(length: 16).map((lod) {
return TableViewRow(height: 30, cells: [
TableViewCell(
child: lod,
),
TableViewCell(
child: lod,
),
TableViewCell(
child: lod,
),
TableViewCell(
child: lod,
),
TableViewCell(
child: lod,
),
TableViewCell(
child: lod,
),
TableViewCell(
child: lod,
),
TableViewCell(
child: lod,
),
TableViewCell(
child: lod,
),
]);
}).toList(),
),
),
],
),
persistentFooterButtons: [
WebPagination(
displayItemCount: 3,
onPageChanged: (int page) {

            setState(() {
              // _paginationController(p, context).jumpTo(page);
              _paginationController.jumpTo(page);
              _paginationController.value=page;
              _paginationController.addListener(() {
                _paginationController.jumpTo(page);
                _paginationController.value=page;
              });
              _paginationController.notifyListeners();
              _paginationController.next();
              print("Has Listner :${_paginationController.hasListeners}");
              p.notifyListeners();
               p.refresh();
            });
            print(
                "WebPagination Current page :${_paginationController.currentPage}");
          },
          currentPage:_paginationController.currentPage,
          totalPage:_paginationController.pageCount)
    ]
);

}
` The data in next page did not display,becuase the current page did not updated,, so what the problem?

herbertamukhuma / scrollable_table_view Goto Github PK

scrollable_table_view's Introduction

Features

Demo

Note

Getting started

Usage

Pagination

Additional information

Common Issues

scrollable_table_view's People

Contributors

Stargazers

Watchers

Forkers

scrollable_table_view's Issues

Recommend Projects

Recommend Topics

Recommend Org