caduandrade / davi_flutter Goto Github PK
View Code? Open in Web Editor NEWA full customized data view that builds the cells on demand. Focused on Web/Desktop Applications. Bidirectional scroll bars.
License: MIT License
A full customized data view that builds the cells on demand. Focused on Web/Desktop Applications. Bidirectional scroll bars.
License: MIT License
😉
I didn't find easy_table_example directory in my flutter plugins directory when I installed this package.
Amigo bom dia, você colocou na documentação que existe um erro no flutter quando a barra de rolagem fica visivel e invisivel, ai você coloquei como deveria resolver esse problema para sempre ficar visivel, eu como você colocou mais a barra horizontal não esta ficando visivel só a barra vertical. Coloquei como esta na forma abaixo:
EasyTableTheme(
data: EasyTableThemeData(
scrollbar: const TableScrollbarThemeData(
horizontalOnlyWhenNeeded: false,
verticalOnlyWhenNeeded: false,
),
),
),
Olá, gostei do seu widget, mas vi que as rolagem scrool, não funciona no Android nem Ios, tem previsão de alguma atualização com isso?
I have two tables in my app. One updates the horizontal scroll position of the table as the slider is being moved (ScheduleEasyTable
) and the other only updates the horizontal position of the table after dragging the slider and releasing the mouse button.
This is only happening on the web platform. Have not tested whether html or canvaskit renderer is doing it. Windows platform does not exhibit this behavior.
I've also tried disabling pinned
parameter as well as removing the InkWell
s to see if those might be causing an issue and neither fixes it for the ContactsEasyTable
Thoughts??
class ScheduleEasyTable extends StatefulWidget {
const ScheduleEasyTable({Key? key}) : super(key: key);
@override
State<ScheduleEasyTable> createState() => _ScheduleEasyTableState();
}
class _ScheduleEasyTableState extends State<ScheduleEasyTable> {
@override
Widget build(BuildContext context) {
final scheduleProvider = context.watch<Schedule>();
final themeProvider = context.watch<AppTheme>();
final _rows = scheduleProvider.filteredData;
return Center(
child: EasyTableTheme(
data: EasyTableThemeData(
headerCell: HeaderCellThemeData(
padding: const EdgeInsets.all(5),
sortIconColor: themeProvider.text,
),
row: RowThemeData(
hoveredColor: (index) => themeProvider.rowColorHover,
color: (index) => index % 2 == 0
? themeProvider.rowColorHighlighted
: themeProvider.rowColorNormal,
),
),
child: EasyTable(
EasyTableModel(
rows: _rows,
columns: [
EasyTableColumn(
name: "Controls",
width: 140,
// pinned: true,
cellBuilder: (context, row) => EasyTableCell(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
// MORE INFO ICON
IconButton(
tooltip: "More Info",
padding: const EdgeInsets.only(
left: 1,
right: 1,
),
icon: const Icon(
Icons.info_outline,
size: 20,
),
onPressed: () {
scheduleProvider.showMoreInfoDialog(context, row);
},
),
// BUY BOOKS ICON
IconButton(
tooltip: "Buy Materials",
padding: const EdgeInsets.only(
left: 1,
right: 1,
),
icon: const Icon(
Icons.menu_book_sharp,
size: 20,
),
onPressed: () {
scheduleProvider.launchBookStore(row);
},
),
IconButton(
tooltip: "Copy Course Information",
padding: const EdgeInsets.only(
left: 1,
right: 1,
),
icon: const Icon(
Icons.copy_all_sharp,
size: 20,
),
onPressed: () {
scheduleProvider.copyRowToClipboard(row);
showSnackBar(
'Course information copied to clipboard!',
isSuccess: true,
);
},
),
],
),
),
),
EasyTableColumn(
name: "CRN",
stringValue: (row) => (row as Map)["CRN"],
width: 60,
// pinned: true,
),
EasyTableColumn(
name: "Subject",
stringValue: (row) => (row as Map)["SC"],
width: 70,
),
EasyTableColumn(
name: "Course",
stringValue: (row) => (row as Map)["CN"],
width: 70,
),
EasyTableColumn(
name: "Description",
stringValue: (row) => (row as Map)["CT"],
width: 250,
),
EasyTableColumn(
name: "Hours",
stringValue: (row) => (row as Map)["CH"],
width: 60,
),
EasyTableColumn(
name: "Days",
stringValue: (row) => (row as Map)["D"],
width: 80,
),
EasyTableColumn(
name: "Start",
stringValue: (row) => (row as Map)["TB"],
width: 80,
),
EasyTableColumn(
name: "End",
stringValue: (row) => (row as Map)["TE"],
width: 80,
),
EasyTableColumn(
name: "Building",
stringValue: (row) => (row as Map)["B"],
width: 220,
),
EasyTableColumn(
name: "Room",
stringValue: (row) => (row as Map)["R"],
width: 80,
),
EasyTableColumn(
name: "Teacher(s)",
stringValue: (row) => (row as Map)["TN"].toString(),
width: 240,
),
EasyTableColumn(
name: "Enrolled",
stringValue: (row) => "${(row as Map)["E"]} / ${row["MS"]}",
width: 80,
),
EasyTableColumn(
name: "Date Start",
stringValue: (row) => (row as Map)["PTRMDS"],
width: 100,
),
EasyTableColumn(
name: "Date End",
stringValue: (row) => (row as Map)["PTRMDE"],
width: 100,
),
EasyTableColumn(
name: "Method",
stringValue: (row) => (row as Map)["INSMC"],
width: 80,
),
EasyTableColumn(
name: "Added Fees",
stringValue: (row) => (row as Map)["AF"],
width: 100,
),
],
),
// columnsFit: viewPortWidth(context) >= 1900 ? true : false,
visibleRowsCount: 20,
),
),
);
}
}
class ContactsEasyTable extends StatefulWidget {
const ContactsEasyTable({Key? key}) : super(key: key);
@override
State<ContactsEasyTable> createState() => _ContactsEasyTableState();
}
class _ContactsEasyTableState extends State<ContactsEasyTable> {
@override
Widget build(BuildContext context) {
final directoryProvider = context.watch<Directory>();
final themeProvider = context.watch<AppTheme>();
final _rows = directoryProvider.filteredData;
return Center(
child: EasyTableTheme(
data: EasyTableThemeData(
headerCell: HeaderCellThemeData(
padding: const EdgeInsets.all(5),
sortIconColor: themeProvider.text,
),
row: RowThemeData(
hoveredColor: (index) => themeProvider.rowColorHover,
color: (index) => index % 2 == 0
? themeProvider.rowColorHighlighted
: themeProvider.rowColorNormal,
),
),
child: EasyTable(
EasyTableModel(
rows: _rows,
columns: [
EasyTableColumn(
padding: const EdgeInsets.all(5),
name: "Name",
stringValue: (row) =>
"${(row as Map)["LastName"]}, ${row["FirstName"]}",
width: 200,
pinned: true,
),
EasyTableColumn(
padding: const EdgeInsets.all(5),
name: "Phone Number",
cellBuilder: (context, row) => EasyTableCell(
child: InkWell(
child: Padding(
padding: const EdgeInsets.all(5),
child: Text(
(row as Map)["PhoneNumber"],
style: const TextStyle(
decoration: TextDecoration.underline,
),
),
),
onTap: () =>
launchUrl(Uri.parse("tel:${row["PhoneNumber"]}")),
),
),
sort: (a, b) {
return (a as Map)["PhoneNumber"]
.toString()
.compareTo((b as Map)["PhoneNumber"].toString());
},
width: 130,
),
EasyTableColumn(
padding: const EdgeInsets.all(5),
name: "Title",
stringValue: (row) => (row as Map)["JobTitle"],
width: 200,
),
EasyTableColumn(
padding: const EdgeInsets.all(5),
name: "Department",
stringValue: (row) => (row as Map)["Department"],
width: 260,
),
EasyTableColumn(
padding: const EdgeInsets.all(5),
name: "Email",
cellBuilder: (context, row) => EasyTableCell(
child: InkWell(
child: Padding(
padding: const EdgeInsets.all(5),
child: Text(
(row as Map)["EmailAddress"],
style: const TextStyle(
decoration: TextDecoration.underline,
),
),
),
onTap: () =>
launchUrl(Uri.parse("mailto:${row["EmailAddress"]}")),
),
),
width: 230,
),
EasyTableColumn(
padding: const EdgeInsets.all(5),
name: "Campus",
stringValue: (row) => (row as Map)["Campus"],
width: 130,
),
EasyTableColumn(
padding: const EdgeInsets.all(5),
name: "Office",
stringValue: (row) => (row as Map)["Office"],
width: 100,
),
],
),
columnsFit: viewPortWidth(context) >= 1300 ? true : false,
// visibleRowsCount: 20,
),
),
);
}
}
This refactoring would facilitate and allow better performance, right pinned columns, header group, and infinite scroll widget.
Hi! Thanks for your project. I have data that have 6 level of element nesting. Like:
Item:
lots:
lot
objs
obj
I need to display them in table. I did not seen tables components that have support of deep nesting. It would be cool if you will do something for this.
我不能在安卓手机里面不能向左右滚动?但是在模拟器里面可以。
Can't scroll to left or right in my android phone? But it can be done in the android simulator.
Hi,
Thanks for this project.
I can't find any way of stretching only a single column to fill the available width while having other columns have a fixed width with custom cell renderers.
I'm looking for the following behavior:
| <---- flex column that will fill in all available width ---> | fixed width column | fixed width column |
The idea is that the fixed width columns will not allow the width to go below their min width (or their intrinsic width) and the flex column use up the available width after the fixed width columns have taken theirs.
Things I've tried:
weight
of 100 on the stretch column and a weight
of 1 on the fixed columns, but then the fixed width columns aren't rendered at all.weight
10 on the stretch column and 1 on the others gets them to render, but the columns that are supposed to be fixed width still expand and contract when the window is resized.width
parameter of the columns seems to be ignored with columnsFit: true
.ConstrainedBox
or IntrinsicWidth
, but there was no effect.Specifically in my case I only need 1 flex column, but I suppose this can be generalized into the following:
How to mix any number of flex columns (that behave according to the weight
behavior) with fixed-width columns that do not flex?
Sorry) I thought it's another component)
Hi,
I like your package, its pretty easy to use :)
I didn't test the lazy building but I assume its working, just not sure what will happen if the next content has larger text in the column, will the row resize on the fly?
Could you add a onSecondaryTap? This would be nice.
First. Thank you for this wonderful library!
The issue I'm having is in regards to accessibility. The semantics of some fields are all squished together.
After adding RendererBinding.instance.setSemanticsEnabled(true)
and running with flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true
, this is what I get:
Create onRowTap
and onRowDoubleTap
List<ROW> _rows;
/// allow user to extract the updated data(add/remove)
List<ROW> get rowsData => _rows;
I want to display a sheet from a xlsx file but i don't know how many columns and what column names are , how should i use this repo?
Hi,
I had some ideas and a smaller issue.
Currently its not possible to let the table fill up the full height right?
If it would be possible the actionbar on top and footer with paging would be even cooler.
EasyTableColumn
textStyle
to headerTextStyle
and cellTextStyle
padding
to headerPadding
and cellPadding
alignment
to headerAlignment
and cellAlignment
cellStyleBuilder
Touch pointer move a lot. The moving distance of X is:1.0, limit is:60The moving distance of Y is:65.0, limit is:60
just have to move with specific point
Infinite scroll is not working, the onLastRowWidget, when it reaches the last line, is not executed.
Hi,
after the update to Flutter 3.3.0 the table keeps freezing when multiple entries are in and Im scrolling.
I think they changed internally how scrolling works and maybe thats part of the issue.
I tested it on macOS via trackpad and not sure if this happens as well on Android, iOS, Windows or web.
Current behaviour
Table is not scrollable
Expected behaviour
Table will scroll
Hello dear @caduandrade , thank you for easy table packages. Everything is fine, but this package's scroll behavior is very heavy and slow.
Can you suggest how we can make it faster and smoother like pluto_grid?
I appreciate your help a lot
Hi again!
I think I found a small bug with the color of the scrollbars.
Besides that I have some questions
Hi,
It would be nice to have a callback when we rendered the last item. This would be useful for infinite scrolling.
Since we provide an item collection instead of a builder function its not that easy to implement.
Only with workarounds like checking in every item onInit for index.
Hi,
this package seems like really nice data table, but there is no mention of filtering (i.e. searching) functionality? Is it planned or I'm missing something?
Actually, I'm trying currently bunch of Flutter datatables, and almost all missing decent search/filter capability. But filtering data in the tables is a really daily task for many apps, and should be must have. The greatest benefit comes from ability to filter by multple columns at the same time. (I think only pluto_grid can do this).
If multple columns search will be in the next versions of easy_table, that will be a killing feature in my opinion.
Would it be possible to add sorting for multiple simultaneous columns?
something like:
sort -> sub-sort -> sub-sort .
I have a user who has requested this feature.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.