Data Tables for Flutter

Overview

Buy Me A Coffee Donate github pages GitHub stars data_tables

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 onSelectAll; - Called for Selecting and Deselecting All

    ValueChanged 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 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 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

Comments
  • Checkbox Column (showSelect: false)

    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: image

    After (showSelect: false): image

    Edit: spelling

    bug 
    opened by xxJeevesxx 8
  • Iterator was called on Null.

    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
    
    opened by rishabhdeepsingh 5
  • Issues while running Flutter 2.5.1

    Issues while running Flutter 2.5.1

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

    image

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

    opened by ewancmc 2
  • showSelect : false is not working?

    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!

    opened by letisoft 2
  • How to expand cells to the edge?

    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.

    γ‚³γƒ‘γƒ³γƒˆ 2020-08-15 232727

    How can I fix this?

    opened by Daibaku9999 2
  • Pagination not working ?

    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

    opened by Mapk26 1
  • Splash of the

    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?

    opened by Wissperwind 1
  • How to Apply Background color .

    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 .

    image

    opened by VarmaTech 1
  • How can change the defaultRowsPerPage?

    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 ? 😭

    opened by NightFog007 1
  • Ability to hide SelectAll and Sort actions

    Ability to hide SelectAll and Sort actions

    image

    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.

    enhancement 
    opened by slavap 1
  • fix: data table is not scrolling horizontally at Web

    fix: data table is not scrolling horizontally at Web

    There are two issues at Web usage.

    1. Not scrolling horizontally at Web. Flutter changed the default behavior since Flutter 2.5+. Reference: https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag

    2. While scrolling vertically, the debug console display the error:

    The following assertion was thrown while notifying status listeners for AnimationController:
    The Scrollbar's ScrollController has no ScrollPosition attached.
    
    A Scrollbar cannot be painted without a ScrollPosition. 
    

    Please help to review it, thanks!

    opened by starlitya 0
  • Data Table is not Scrolling Horizontally

    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.

    opened by mhabuburrahman 9
  • The argument type 'void Function(bool)' can't be assigned to the parameter type 'void Function(bool?)?'

    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;
                        });
                      }
                    },
    
    opened by Shubham-Narkhede 3
  • Row onTap function

    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...

    opened by jaredgreener 0
  • Issue on Channel stable, 2.5.0

    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!`
    opened by danieramiz 2
  • Data Table is not Scrolling Horizontally

    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,
                
    
    opened by hashweather 0
  • Mobile listView not accepting empty list

    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)

    opened by mohammedX6 0
Owner
Rody Davis
Developer Advocate for @material-components at @Google
Rody Davis
Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Marcelo Glasberg 122 Dec 22, 2022
Flutter Carousel Pro - A Flutter Carousel widget

Carousel Extended A Flutter Carousel widget. Usage As simple as using any flutter Widget. Based on Carousel Pro but extended to be able to navigate be

omid habibi 3 Dec 7, 2020
Flutter-useful-widgets - Flutter Useful Widgets

useful_widgets This package makes it easy to build apps by providing a list of simple and useful widgets. import 'package:useful_widgets/useful_widget

Ricardo Crescenti 6 Jun 20, 2022
Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Kim Seung Hwan 7 Dec 7, 2022
Various Flutter widgets that are developed by Google but not by the core Flutter team

Flutter widgets This repository contains the source code for various Flutter widgets that are developed by Google but not by the core Flutter team. Is

Google 1.1k Jan 7, 2023
πŸŸ₯ A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

?? A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Andrei Lesnitsky 32 Oct 8, 2022
A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter

flutter_floatwing A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter. Android only Features Pure Flu

Zoe 116 Dec 21, 2022
Flutter Application to test basic flutter understanding

Flutter Application to test basic flutter understanding Getting Started Before you start with the application have a look at what

null 0 Apr 16, 2022
Flutter UI Widgets Flutter Package

Flutter UI Widgets Flutter Package This package makes different Flutter UI widgets implementation easy for you. Flutter UI Widgets The list of widgets

Hassan Ur Rahman 0 May 6, 2022
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | PortuguΓͺs Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Remi Rousselet 2.6k Dec 29, 2022
Simple form maker for Flutter Framework

Flutter FormBuilder - flutter_form_builder This package helps in creation of data collection forms in Flutter by removing the boilerplate needed to bu

Danvick Miller 1.2k Jan 3, 2023
A credit card widget for Flutter application.

A credit card widget for Flutter application.

Simform Solutions 281 Dec 27, 2022
Code generation for Flutter Padding widgets based on your constants

Code generation for Flutter Padding widgets based on your constants

Emanuele 14 Oct 20, 2022
A simple Flutter widget library that helps us to select days in a week.

A simple Flutter widget library that helps us to select days in a week.

Shan Shaji 4 Oct 9, 2022
Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Stanislav Ilin 43 Dec 7, 2022
A flutter plugin which provides Crop Widget for cropping images.

A flutter plugin which provides Crop Widget for cropping images.

Chooyan 97 Jan 5, 2023
Flutter Easy Getx Implementations .

People ask me how I manage state,dependency,routes etc when I work with flutter,Here is the Simple Brief About GetX which I used for Dummy Basic Ecommerce Concept based flutter app development .

Tasnuva Tabassum oshin 13 Oct 18, 2022
The Chicago widget set for Flutter

Chicago widget library The Chicago widget set is a retro 32-bit desktop design language for Flutter. It was discussed in the Building a desktop design

Todd Volkert 404 Dec 26, 2022
A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier.

Draggable Home A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier! Based on the Scaffold and Sliver. Us

Devs On Flutter 106 Dec 12, 2022