rodydavis / data_tables

Data Tables for Flutter

data_tables

• Full Screen Paginated Data Tables for Tablets/Desktops
• Mobile ListView with Action Buttons for Sorting and Selecting All
• Supports Dark Mode
• From Json

Online Demo: https://rodydavis.github.io/data_tables/

Getting Started

• You can optionally build the listview for mobile with a builder, by default it creates a ExpansionTile with the remaining columns as children

• The tablet breakpoint can also be set.

  bool showMobileListView; - When set to false it will always show a data table

  int sortColumnIndex; - Current Sorted Column

  bool sortAscending; - Sort Order

  ValueChanged<bool> onSelectAll; - Called for Selecting and Deselecting All

  ValueChanged<int> onRowsPerPageChanged; - Called when rows change on data table or last row reached on mobile.

  int rowsPerPage; - Default Rows per page

  Widget header; - Widget header for Desktop and Tablet Data Table

  List<DataColumn> columns; - List of Columns (Must match length of DataCells in DataSource)

  IndexedWidgetBuilder mobileItemBuilder; - Optional Item builder for the list view for Mobile

  Size tabletBreakpoint; - Tablet breakpoint for the screen width and height

  List<Widget> actions, selectedActions; - Actions that show when items are selected or not

  RefreshCallback onRefresh; - If not null the list view will be wrapped in a RefreshIndicator

Screenshots

data_tables's Issues

Row onTap function

How do you execute a function on a row tap? Specifically on a fromJson build.

I tried using the actions widget list, but once you tap an action icon there is no way to reference the selected item...

How to Apply Background color .

Hi ,
Not able to apply full background color to the header of Table as there is gap coming between columns below is a screenshot and also i need to set color to the footer where pagination is coming .

also how to apply background color and custom this options

The argument type 'void Function(bool)' can't be assigned to the parameter type 'void Function(bool?)?'

Hi i'm using this library and when I integret it with my code then it gives this type of error i dont knw why im getting this please help mi.

The argument type 'void Function(bool)' can't be assigned to the parameter type 'void Function(bool?)?'

     onSelectChanged: (bool value) {
                  if (dessert.selected != value) {
                    setState(() {
                      dessert.selected = value;
                    });
                  }
                },

How to use Streambuilder with data_table

I used the conventional way but still got an iterator error. I am fetching the data from firestore

Bottom sheet on mobile is not updating UI

Hi!

Thanks for the great code you always do. We are using the data_tables in our project.
amplify-edge/packages#455

On your example the bottom sheet for sorting by a category is not updating after clicking the radio button or the ListTile itself. Only after clicking it twice!

So the list is sorted AFTER setState of the bottom sheet is called (even if the call is not async?!)

Tested on flutter channel beta and channel dev with your example.

showSelect : false is not working?

Hello,

The lib is great! Thank you very much for your efforts.
I am trying to make the table without selections/checkboxes so I set showSelect : false but still can select?

Thank you!

Height based on number of rows

How to make DataTable height adjust to a number of rows? Right now height is matched to the parent widget even though the table has one row

Iterator was called on Null.

When I try to build this widget simply by using the below code. I am getting the following error. any help would be appreciated.

    return NativeDataTable(
      columns: [
        DataColumn(label: Text('Name')),
        DataColumn(label: Text('Address')),
      ],
      rows: [
        DataRow(cells: [
          DataCell(Text('this is a name')),
          DataCell(Text('This is an address')),
        ])
      ],
    );

The getter 'iterator' was called on null.
Receiver: null
Tried calling: iterator

Data table not showing when using SingleChildScrollView

Data table is not displaying when using with SingleChildScrollView, please help out

Checkbox Column (showSelect: false)

Love the package, thanks for creating it! I'm trying to remove the checkbox column.I try to disable the checkbox something I didn't expect happens. I see that showSelect maps to showCheckboxColumn in your implementation however it also removes the header along the top and the checkbox column doesn't actually disappear. Am I just missing something? I haven't played with the Flutter DataTable yet so maybe it happens there too. Any thoughts?

Before:

After (showSelect: false):

Edit: spelling

Data Table is not Scrolling Horizontally

I have an issue.

My table has 8 columns and so some of the columns at the right end(edge) are not showing. I tried scrolling horizontally to show hidden columns but that is not working despite all I've tried. I want it to scroll horizontally because I am building for Web with it.

Mobile listView not accepting empty list

If I send an empty list to the listview this error appears:

The following assertion was thrown building RawGestureDetector-[LabeledGlobalKey#fc898](state: RawGestureDetectorState#5c95b(gestures: , behavior: opaque)):
A RenderViewport expected a child of type RenderSliver but received a child of type RenderPositionedBox.

RenderObjects expect specific types of children because they coordinate with their children during layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a RenderSliver does not understand the RenderBox layout protocol.
The RenderViewport that expected a RenderSliver child was created by: Viewport ← IgnorePointer-[GlobalKey#93c42] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey#fc898] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#8d585] ← RepaintBoundary ← CustomPaint ← RepaintBoundary ← ⋯
The RenderPositionedBox that did not match the expected child type was created by: Center ← Viewport ← IgnorePointer-[GlobalKey#93c42] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey#fc898] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#8d585] ← RepaintBoundary ← CustomPaint ← ⋯
The relevant error-causing widget was:
NativeDataTable file:///Users/apple/AndroidStudioProjects/Adaa_Mobile/lib/src/KPIReport/Widgets/ComplexOperations.dart:38:30
When the exception was thrown, this was the stack:
#0 ContainerRenderObjectMixin.debugValidateChild. (package:flutter/src/rendering/object.dart:3129:9)
#1 ContainerRenderObjectMixin.debugValidateChild (package:flutter/src/rendering/object.dart:3156:6)
#2 MultiChildRenderObjectElement.insertRenderObjectChild (package:flutter/src/widgets/framework.dart:6160:25)
#3 RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5758:35)
#4 RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5440:5)

Table with many columns compressing content

How to use inside of another ListView?

How to expand cells to the edge?

I would like to expand cells to the edge of the right.
It looks little unbalance because cells won't expand on the right side like a photo below.

How can I fix this?

How can change the defaultRowsPerPage?

Hi , I want to change static const int defaultRowsPerPage = 10; to static const int defaultRowsPerPage = 50;, but it can not take effect, can you help me ? 😭

Error: Method not found: 'ButtonTheme.bar'. child: ButtonTheme.bar(

Hiding/making optional the row checkbox

Hi,

I'm using your package to solve the responsiveness on my project and it seems to work so good!

I just have a doubt, right now we don't require any action at selecting rows, so we would deactivate/hide the checkbox to avoid misslead actions on the users.

Is it possible to deactivate it? I just realized it happens just in the mobile mode.

Thanks.

PD: It seems the demostration page to not been working.

ButtonTheme.bar is Deprecated

Issue on Channel stable, 2.5.0

Here are the errors I'm getting when I try to compile my code.

Logs

`
^^^^^^^^^^^^^
../../SDKs/flutter/.pub-cache/hosted/pub.dartlang.org/data_tables-1.3.2/lib/ui/mobile_paged_listview.dart:229:68: Error: The getter 'headline' isn't defined for the class 'TextTheme'.

• 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('../../SDKs/flutter/packages/flutter/lib/src/material/text_theme.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'headline'.
  style: Theme.of(context).textTheme.headline,
  ^^^^^^^^
  ../../SDKs/flutter/.pub-cache/hosted/pub.dartlang.org/data_tables-1.3.2/lib/ui/stateless_datatable.dart:226:45: Error: The getter 'subhead' isn't defined for the class 'TextTheme'.
• 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('../../SDKs/flutter/packages/flutter/lib/src/material/text_theme.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'subhead'.
  ? themeData.textTheme.subhead!
  ^^^^^^^
  ../../SDKs/flutter/.pub-cache/hosted/pub.dartlang.org/data_tables-1.3.2/lib/ui/stateless_datatable.dart:228:45: Error: The getter 'title' isn't defined for the class 'TextTheme'.
• 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('../../SDKs/flutter/packages/flutter/lib/src/material/text_theme.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'title'.
  : themeData.textTheme.title!
  ^^^^^
  ../../SDKs/flutter/.pub-cache/hosted/pub.dartlang.org/data_tables-1.3.2/lib/ui/stateless_datatable.dart:299:43: Error: The getter 'subhead' isn't defined for the class 'TextTheme'.
• 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('../../SDKs/flutter/packages/flutter/lib/src/material/text_theme.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'subhead'.
  ? themeData.textTheme.subhead!
  ^^^^^^^
  ../../SDKs/flutter/.pub-cache/hosted/pub.dartlang.org/data_tables-1.3.2/lib/ui/stateless_datatable.dart:301:43: Error: The getter 'title' isn't defined for the class 'TextTheme'.
• 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('../../SDKs/flutter/packages/flutter/lib/src/material/text_theme.dart').
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'title'.
  : themeData.textTheme.title!`

Plugin link from main readme for this package leads to a 404

Ability to hide SelectAll and Sort actions

It's possible to remove select checkboxes by providing (and for mobile also mobileItemBuilder):

DataRow.byIndex(
        index: index,
        selected: null,
        onSelectChanged: null,
        cells: <DataCell>[

But not possible to hide SelectAll action. Also Sort action should be possible to hide as well.

[Future request] Nested data

I need to display cells in cell.

Data Table is not Scrolling Horizontally

Thanks for the effort put into this library.

I however have an issue.

My table has 7 columns and so some of the columns at the right end(edge) are not showing, so I tried to wrap the NativeDataTable in a SingleChildScrollView so that it can scroll horizontally to show hidden columns but that is not working despite all I've tried.

Here is what I've tried yet it is not scrolling horizontally. I want it to scroll horizontally because I am building for Web with it.

SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: NativeDataTable.builder(
            itemCount: data.length,
            rowsPerPage: _rowsPerPage,
            rowCountApproximate: false,
            

How can I make the table header stay?

Hi,
I need to make the table headders be visibla all the time. At the moment they scroll with the data. Is that possible?

Give me a json file please

Give me a json file please

fix header and size column

How to fix the header and determine a size for each column?

How can I actually make a text DataCell editable

I need to show some text in a cell, and I need the text to be editable. What should I do in the onTap function to achieve this? Thanks.

Need Search field in top row to filter data from any column.

For reference -

https://datatables.net/examples/api/multi_filter.html

How to Apply Background color .

Hi ,
Not able to apply full background color to the header of Table as there is gap coming between columns below is a screenshot and also i need to set color to the footer where pagination is coming .

no items is not working

whe i use Noitems attribute & pass any widget or container it dont show that widget/contaienr in table .
it only shows "no data" text.
please help me in that how to use noitens attribute n how to pass widget to that

email id - [email protected]
noItems: Text("No Items Found"),

noItems: Text("No Items Found"),

Splash of the "next page button" huge

Hi,
I am using the table in flutter web. If I hover over the button to display the next page, a huge circle appears. It is mouch bigger than the button. Can you make it smaller please?

Pagination not working ?

Hi,

thanks for this package.

I'm trying to use the pagination but I can't find out how it works.
In the demo version https://rodydavis.github.io/data_tables/#/
at the bottom it shows 1-40 of 200 but the next button is disabled. I have the same "issue"

Should I manage pagination by myself with handleNext callback?

Thanks

Last row keeps refreshing

I don't want to add extra dummy lines at the end of the data table, but in this case, the last row keeps refreshing. How can I resolve this? Thank in advance.

How to disable to fetch the data when scroll to page end

How to disable to fetch the data when scroll to page end in mobile view ? Even if no more data can be fetch.

How i can add filter row on header of every column

i want to add filter to every column, how i can do that

Translate and customize pagination

How can I translate language of widget and customize the paging bar at the bottom?

Issues while running Flutter 2.5.1

My application won't compile or run, attached below is my terminal output:

It seems that this issue is also happening with the data_tables example project.