maxim-saplin / data_table_2 Goto Github PK

I tried to change the look of the table from the theme data (globally), so it would look the same throughout the entire app.
I succeeded to some extent, but styling the TableBorder from the theme data wasn't possible.

Is there a way that I don't know of to style the TableBorder from the theme data?

Thanks in advance...

hey @maxim-saplin, i currently have issue with DataTable2, when having many data column and i set minWidth to 2000 the table is good but the horizontal scroll is not active/visible like this

but when i click tab in keyboard , it will go to next form and scroll to the right like this

this is my code

currently i have flutter channel beta with latest update

any suggestion why horizontal scroll is not visible? thank you

I noticed that you changed the default column width behavior, this behavior is good when you have a few columns, but when there are several columns on a not too wide screen, it causes the text to be expressed, not showing proper behavior.

I propose a very simple solution that involves wrapping the table in a container with minimum width restrictions

Scrollbar(
                    child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: Container(
                          constraints:
                              BoxConstraints(minWidth: constraint.maxWidth),
                          child: ...

And stop defining a width for the columns, keeping the default behavior so that they occupy the necessary size according to their content, except when that size is explicitly defined by the constructor

../../../develop/flutter/.pub-cache/hosted/pub.flutter-io.cn/data_table_2-2.1.1/lib/data_table_2.dart:144:13: Error: No named
parameter with the name 'checkboxHorizontalMargin'.
checkboxHorizontalMargin: checkboxHorizontalMargin,
^^^^^^^^^^^^^^^^^^^^^^^^
../../../develop/flutter/.pub-cache/hosted/pub.flutter-io.cn/data_table_2-2.1.1/lib/data_table_2.dart:233:18: Error: The
getter 'checkboxHorizontalMargin' isn't defined for the class 'DataTable2'.
- 'DataTable2' is from 'package:data_table_2/data_table_2.dart'
('../../../develop/flutter/.pub-cache/hosted/pub.flutter-io.cn/data_table_2-2.1.1/lib/data_table_2.dart').
Try correcting the name to the name of an existing getter, or defining a getter or field named 'checkboxHorizontalMargin'.
start: checkboxHorizontalMargin ?? effectiveHorizontalMargin,
^^^^^^^^^^^^^^^^^^^^^^^^
../../../develop/flutter/.pub-cache/hosted/pub.flutter-io.cn/data_table_2-2.1.1/lib/data_table_2.dart:234:17: Error: The
getter 'checkboxHorizontalMargin' isn't defined for the class 'DataTable2'.
- 'DataTable2' is from 'package:data_table_2/data_table_2.dart'
('../../../develop/flutter/.pub-cache/hosted/pub.flutter-io.cn/data_table_2-2.1.1/lib/data_table_2.dart').
Try correcting the name to the name of an existing getter, or defining a getter or field named 'checkboxHorizontalMargin'.
end: (checkboxHorizontalMargin ?? effectiveHorizontalMargin) / 2.0,

can You help me with this ? this my code :

import 'package:data_table_2/data_table_2.dart';
showTable(List<Product> data, isWide, loading, screenWidth) { return FadeTransition( opacity: tableController, child: TweenAnimationBuilder( tween: scaleTween, duration: Duration(milliseconds: tableDuration), builder: (context, double scale, child) { return Transform.scale( scale: scale, child: child, ); }, child: Card( color: tableCardColor, elevation: 15, child: Container( height: isWide ? 149 : 180, child: ScrollConfiguration( behavior: ScrollConfiguration.of(context).copyWith(dragDevices: { PointerDeviceKind.touch, PointerDeviceKind.mouse, }), child: SingleChildScrollView( controller: scrollController, scrollDirection: Axis.horizontal, child: SingleChildScrollView( child: ConstrainedBox( constraints: BoxConstraints( minWidth: screenWidth * 0.8, maxWidth: screenWidth * 0.8), child: DataTable2( columnSpacing: 12, minWidth: 600, smRatio: 0.75, lmRatio: 1.5, dataTextStyle: TextStyle( fontSize: isWide ? 13 : 12, color: Colors.black), decoration: dataTableDecoraiton(), columns: [ DataColumn2( size: ColumnSize.S, label: Text('Seria', style: TextStyle(fontWeight: FontWeight.bold))), DataColumn2( size: ColumnSize.S, label: Text('Indeks', style: TextStyle(fontWeight: FontWeight.bold))), DataColumn2( size: ColumnSize.S, label: Text('Nazwa części', style: TextStyle(fontWeight: FontWeight.bold))), DataColumn2( size: ColumnSize.S, label: Text('Firma', style: TextStyle(fontWeight: FontWeight.bold))), DataColumn2( size: ColumnSize.S, label: Text('Ostatnia zmiana statusu', style: TextStyle(fontWeight: FontWeight.bold))), ], rows: data .map((product) => DataRow( selected: selectedProduct.contains(product), onSelectChanged: (isSelected) { setState(() { selectedProduct = []; final isAdded = isSelected != null && isSelected; isAdded ? selectedProduct.add(product) : selectedProduct .remove(product.productSerial); }); }, color: dataTableColor(), cells: [ DataCell(Text(product.productSerial)), DataCell(Text(product.productIndex)), DataCell(Text(product.productName)), DataCell(Text(product.companyName)), DataCell( Text(product.daysAgo.toString())), ])) .toList()), ), ), ), ), ), ), ), ); }

hi, i really like this package , everything is work fine , but i would like to set auto size for dataRowHeight , how can i do that ? this is also a problem everyone facing right now too , thank in advance :) https://github.com/flutter/flutter/issues/70510

Hi there,

I have run into this issue several times. I cannot figure out how to set the height of each data row to fully wrap the text contained within it.

It often just cuts off some of the text that is displayed in the row when it is too long to fit on a single line.

Am I missing a param for this? Or is it not supported at the moment?

With Flutter widget DataColumn, the title text is fully displayed.
With DataColumn2, the title is shorted
Flutter lib:

data_table_2

i use many datatable and listview, it is laggy and slow, how to solve the problem

Maxim,
I have observed a problem.
Imagine, we have a PaginatedDataTable2 that contains 200 rows distributed over several pages, now I am on the last page (page 20 / rowsPerpage: 10).
Now imagine that we have put in the window a button to "refresh" the rows from the server.
In the case that all but 1 lines have been deleted, if the "refresh" button is clicked, the PaginatedDataTable2 widget will remain on the last page, when actually the table now only has one page containing one row. A normal grid of a windows desktop application, when doing the refresh, would show the only record that remains. The PaginatedDataTable IMHO should also show the first page that contains the only table row left after rows deletion.
What do you think?
Thanks.
Regards,
Jose

Nothing fancy, when I am adding this import to the the project it shows this error message when compiling (even if I am not using the DataTable2 class)

import 'package:data_table_2/data_table_2.dart';

Launching lib/main.dart on Chrome in debug mode...
lib/main.dart:1
../../../Development/flutter/.pub-cache/hosted/pub.dartlang.org/data_table_2-2.1.1/lib/data_table_2.dart:144:13: Error: No named parameter with the name 'checkboxHorizontalMargin'.
            checkboxHorizontalMargin: checkboxHorizontalMargin,
            ^^^^^^^^^^^^^^^^^^^^^^^^
../../../Development/flutter/.pub-cache/hosted/pub.dartlang.org/data_table_2-2.1.1/lib/data_table_2.dart:233:18: Error: The getter 'checkboxHorizontalMargin' isn't defined for the class 'DataTable2'.

 - 'DataTable2' is from 'package:data_table_2/data_table_2.dart' ('../../../Development/flutter/.pub-cache/hosted/pub.dartlang.org/data_table_2-2.1.1/lib/data_table_2.dart').
Try correcting the name to the name of an existing getter, or defining a getter or field named 'checkboxHorizontalMargin'.
          start: checkboxHorizontalMargin ?? effectiveHorizontalMargin,

                 ^^^^^^^^^^^^^^^^^^^^^^^^
../../../Development/flutter/.pub-cache/hosted/pub.dartlang.org/data_table_2-2.1.1/lib/data_table_2.dart:234:17: Error: The getter 'checkboxHorizontalMargin' isn't defined for the class 'DataTable2'.
 - 'DataTable2' is from 'package:data_table_2/data_table_2.dart' ('../../../Development/flutter/.pub-cache/hosted/pub.dartlang.org/data_table_2-2.1.1/lib/data_table_2.dart').
Try correcting the name to the name of an existing getter, or defining a getter or field named 'checkboxHorizontalMargin'.
          end: (checkboxHorizontalMargin ?? effectiveHorizontalMargin) / 2.0,
                ^^^^^^^^^^^^^^^^^^^^^^^^

Unhandled exception:
NoSuchMethodError: The getter 'fileOffset' was called on null.
Receiver: null
Tried calling: fileOffset
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:54:5)
#1      ProgramCompiler._nodeStart (package:dev_compiler/src/kernel/compiler.dart:3633:30)
#2      ProgramCompiler._emitConstructorBody (package:dev_compiler/src/kernel/compiler.dart:1523:45)
#3      ProgramCompiler._emitConstructor.<anonymous closure>.<anonymous closure> (package:dev_compiler/src/kernel/compiler.dart:1477:19)
#4      ProgramCompiler._superDisallowed (package:dev_compiler/src/kernel/compiler.dart:3399:24)
#5      ProgramCompiler._emitConstructor.<anonymous closure> (package:dev_compiler/src/kernel/compiler.dart:1476:15)
#6      ProgramCompiler._withLetScope (package:dev_compiler/src/kernel/compiler.dart:2235:25)
#7      ProgramCompiler._withCurrentFunction (package:dev_compiler/src/kernel/compiler.dart:3389:18)
#8      ProgramCompiler._emitConstructor (package:dev_compiler/src/kernel/compiler.dart:1474:16)
#9      ProgramCompiler._defineConstructors (package:dev_compiler/src/kernel/compiler.dart:1116:38)
#10     ProgramCompiler._emitClassDeclaration (package:dev_compiler/src/kernel/compiler.dart:657:19)
#11     ProgramCompiler._emitClass (package:dev_compiler/src/kernel/compiler.dart:580:21)
#12     List.forEach (dart:core-patch/growable_array.dart:403:8)
#13     ProgramCompiler._emitLibrary (package:dev_compiler/src/kernel/compiler.dart:529:23)
#14     List.forEach (dart:core-patch/growable_array.dart:403:8)
#15     ProgramCompiler.emitModule (package:dev_compiler/src/kernel/compiler.dart:394:15)
#16     JavaScriptBundler.compile (package:frontend_server/src/javascript_bundle.dart:144:33)
<asynchronous suspension>
#17     FrontendCompiler.writeJavascriptBundle (package:frontend_server/frontend_server.dart:632:5)
<asynchronous suspension>
#18     FrontendCompiler.compile (package:frontend_server/frontend_server.dart:545:9)
<asynchronous suspension>
#19     listenAndCompile.<anonymous closure> (package:frontend_server/frontend_server.dart:1105:11)
<asynchronous suspension>

the Dart compiler exited unexpectedly.
Exited (sigterm)
Failed to compile application.

when i command + click on this file link ../../../Development/flutter/.pub-cache/hosted/pub.dartlang.org/data_table_2-2.1.1/lib/data_table_2.dart:144:13 it show the file not exists. tried on 2 different projects and 2 different versions of data table2.

I already tried:

flutter clean
flutter pub get

nothing is happening

i want to attach scrollController in rows,
how to do that

I want to display a column, with a search input and data table below it.
but when I do that, the data table looses the scrollability.

example:
Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ FormTextField(labelText: translate(Keys.Global_Search)), Card(child: ProductsTable()), ], );

when i use ProductsTable alone (without column nor TextField) it works properly.
but i need to add the search field.
any ideas?

Why do I need this?

In my case, I added a search filter. When showing the search results, the search result fits on the first page (only a few rows will be shown).
The data table is supposed to switch to the first page because the number of rows provided to the data table is lower than the rows per page (which is a bug by the way).

Hi,
Is there a way to change the language of the PaginatedDataTable2 texts?
For example the text of Rows per page.
Thanks.
Regards,
Jose

Nice project. However, I am really missing the ability to have each column autosize. Ideally, a way to set minWidth for each column to Auto. That way, if there is not enough horizontal space, the table would have a horizontal scrollbar and each column still renders nicely. If there is plenty of space, the columns would scale beyond minWidth per DataColumn2.size

How to do pagination with API, need sample code

Can you guys provide an API to set the first one, or two columns (from left to right) as fixed? For example, the serial number or timestamp columns. Thank you.

Is it possible to change sort icon in data_table_2? if no, will this be a new feature in this package?

and i found some problem in the bottom border of column header when i enable the sort function like this

this is my code for bottom border of column header

return DataColumn2(
        size: size,
        label: Container(
          padding: isCenter ? EdgeInsets.zero : widget.contentPadding,
          alignment: isCenter ? Alignment.center : Alignment.centerLeft,
          constraints: BoxConstraints.expand(),
          decoration: BoxDecoration(
              border: Border(
                // Border bottom of Column Header
                bottom: BorderSide(width: 4, color: Color.fromRGBO(226, 236, 233, 1)),
              )
          ),
          child: text,
        ),

but when i disable sort function it will be normal like this

is this because a bad approach to insert a border in column header or just because sort function make a sort icon elevated in top (like a stack) of column header?

i need your suggestion/solution for this case @maxim-saplin thanks

how can I set sigle Cell's width

How do you keep the Header Stiky?

I cant figure out how to add vertical dividers for the columns please assist

Hello,
Does your PaginatedDataTable2 widget allow the number of rowsPerPage to be automatic based on the height of the widget (fit: FlexFit.tight) on the page?
If it doesn't allow it, this functionality would be very interesting since when making the web page or desktop app bigger (height), PaginateDataTable2 would automatically show more or fewer lines without the need for the user to change them manually.
Thank you very much for adding all these new features to the PaginatedTableView, they were very necessary. 💯 🥇
Regards,
Jose

Hi Maxim,
When you have time you could consider the following idea:
In the PaginatedDataTable2 widget and in the AsyncPaginatedDataTable2 widget (auto rows mode), with the mouse wheel or with a finger touch moving up or down the user could move up or down the rows as it is done in the DataTable2, in this way the user would have the best of both worlds, navigation between rows and navigation between pages.

Thank you very much for all your work.
Regards,
Jose

Where is a way to switch it off?

Does data table supports printing option? or we have to use our own logic for that. And thankyou for the nice package

Is there a way to display a total row on DataTable2?

This row should not be involved in any kind of sorting.

Thanks

Hi Maxim,

Could it be that with the debouncing the navigation between pages goes a little slower than before?
Or is it just a feeling of mine?

Thanks.

Hello,

I got some strange behaviour of the ascending arrow.

When I show the datatable, the order of the rows is correct but the arrow is showing to the opposite direction.

When I switch the order to another column and back to the initial column everything works fine.

add an option to disable rendertime log print

is it possible to merge columns like this mockup ? if no, will this be a new feature in this package?

so the first row will be merged into 1 column and 2nd row still containing 3 columns

i need your suggestion/solution for this case @maxim-saplin thanks

Maxim,
When do you think the async-table version will be available?
I have noticed that I have problems with the implementation simulation that I had done to take the rows by pages from server, sometimes it does not work correctly, in addition, I would like to be able to initially place the PaginatedDataTable2 on the last page and it has not been possible.
Thank you very much for all the help you are giving me.
Regards,
Jose

Hello,

Specifying enum is not enough to size the column width. For example, I want the first column to be larger than ColumnSize.L and the remaining columns to be smaller than ColumnSize.S. It could be great to either expose the values of these enum ratios or allow to specify flex value. If you allow flex, you can refactor minWidth to width which will be horizontal width of the table.

Thank you for the great package.

automatcially scroll vertically by row index feature need

absolutely a great package for upgrading the DataTable features !

but i have an issue regarding zebra-striped row when i use DataTable2 (not occured in DataTable)

this is my code for zebra-striped row

DataRow2(
      color: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
        if (i.isEven) //Change Color if Row is Even, this is for Stripped Table
          return Color.fromRGBO(235, 241, 244, 1);
        else
          return Colors.white;
      }),
      cells: [
          ...
      ],
    );

i try to use either DataRow or DataRow2 in DataTable2 but the result will be same like this

but if i hover to some row in DataTable2, it will have the color of stripped row like this

can you check this issue? is it regarding to DataTable2 or not? thank you so much

Hi,
It would be very interesting if the datasource had paging support, in this way it would not have to take all the records from the server, which would not be very correct when there are huge amounts of records.
This would be similar to what the Advanced_datatable (https://pub.dev/packages/advanced_datatable) widget does.
Thanks.
Regards,
Jose

Is there a way to always show scroll bars?

Hi,
It is great library, I found PaginatedDataTable2 in your library source code, i think it is developing. But in current version, it is very helpful for me and I want to know: "Is it support scroll horizontal in current version?"

Marvelous. I love the new autoRowsToHeight property. :)

However, there is a serious problem that needs to be corrected, since in my case it causes me to not be able to use the new autoRowsToHeight property.
Changing the number of rows does not raise the onRowsPerPageChanged event.
I use it to fetch records from a nodejs server.
It would also be very interesting if the execution of onRowsPerPageChanged could be debounced (RowsPerPageChangedDebounced??), that is, that the onRowsPerPageChanged event does not execute for each change of rowsPerPage in the case of several property changes very quickly when changing the height of the PaginatedDataTable2 widget.
Check out the following video: https://recordit.co/JT0UWm2y6x

If you have any questions about what I have told you, tell me.

Thank you very much for your hard work.

Regards,
Jose

Hi Maxim,

To initially place myself on the last page of the PaginatedDataTable2 widget I have used this code:

 @override
  Widget build(BuildContext context) {  
    final logProvider = Provider.of<LogProvider>(context, listen: true);
    if (logProvider.lastPage) {
      logProvider.lastPage = false;
      Future(() {
        _controller!.goToLastPage();  // <<<<<<<<<<<<<<<<<<<
      });
    }

    return PaginatedDataTable2(
     ....

But it returns the following error:

RangeError (index): Index out of range: index must not be negative: -11

Could you tell me how I can initially place myself on the last page?

Thank you very much for the help.

Regards,
Jose

Hi,
Can I set column width for each column ?

Hi,
It would be very powerful that with the mouse wheel you could navigate between pages.
Thanks.
Regards,
Jose

Hi, how can I display empty result where there is no item to display

onTap is already working for Row and Cell. Can this extends to include onDoubleTap and onLongPress as well?

Firstly thanks for the amazing PaginatedDataTable. When im using it with SingleChildScrollView, it is not rendering on screen. Please check

Is it possible to add horizontal scroll? Thank you.

Is there a way to display a custom footer on the side of the page number?

I'm getting an exception when scrolling the data table with the mouse wheel.

`DataTable2 built: 0ms

════════ Exception caught by animation library ═════════════════════════════════════════════════════
The following assertion was thrown while notifying status listeners for AnimationController:
The provided ScrollController is currently attached to more than one ScrollPosition.

The Scrollbar requires a single ScrollPosition in order to be painted.

When the scrollbar is interactive, the associated Scrollable widgets must have unique ScrollControllers. The provided ScrollController must be unique to a Scrollable widget.

When the exception was thrown, this was the stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49 throw
packages/flutter/src/widgets/scrollbar.dart 1255:9
packages/flutter/src/widgets/scrollbar.dart 1278:14 [_debugCheckHasValidScrollPosition]
packages/flutter/src/widgets/scrollbar.dart 1197:14 [_validateInteractions]
packages/flutter/src/animation/listener_helpers.dart 233:27 notifyStatusListeners
packages/flutter/src/animation/animation_controller.dart 814:7 [_checkStatusChanged]
packages/flutter/src/animation/animation_controller.dart 748:5 [_startSimulation]
packages/flutter/src/animation/animation_controller.dart 611:12 [_animateToInternal]
packages/flutter/src/animation/animation_controller.dart 495:12 reverse
packages/flutter/src/widgets/scrollbar.dart 1349:37
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19 internalCallback
The AnimationController notifying status listeners was: AnimationController#a0dba(◀ 1.000)
════════════════════════════════════════════════════════════════════════════════════════════════════`

I tried to implement horizontal scrolling with the vertical scrolling like the below example, but it doesn't work.
How can I solve this? Please advise.

Thanks in advance...

https://github.com/maxim-saplin/data_table_2/blob/main/example/lib/data_table.dart