I have a data table in which every row could be editable. I need to make a submit button that saves all changes in the table. But I can't figure out how to get all rows in the table.
TextButton(
style: TextButton.styleFrom(
alignment: Alignment.center,
primary: Colors.white,
),
onPressed: () {
print(table1.rows());
},
child: Text(
"Save all changes",
),
),
And DataTable with the key "table1";
Container(
margin: const EdgeInsets.all(10.0),
child: DataTable(
key: table1,
sortAscending: true,
columns: <DataColumn>[
DataColumn(label: Text('AAAA')),
DataColumn(label: Text('BBBB')),
],
rows: provider.data.results.map((data) =>
DataRow(
selected: selectedUsers.contains(data),
onSelectChanged: (b) {
onSelectedRow(b, data);},
cells: [
DataCell(Text(data.aaaa)),
DataCell(Text(data.bbbb)),])).toList(),),),
I want to something like call table1 and get rows and cells in it.
The DataTable class has a rows() method that will give you the rows. Then, for each row you can access the cells by calling the cells() method on the DataRow class.
Check the documentation:
https://api.flutter.dev/flutter/material/DataTable-class.html
If you have specific problems, post your code and what you are stuck at.
Related
I have a PaginatedDataTable with 4 DataColumns. Because I have 4 columns they also don't fit on my page which makes it so you have to horizontally scroll.
Only the first DataColumn is a string for name and the 3 other columns will take an int value. Therefore they shouldn't be that long.
How can I set the width for individual DataColumns?
I also tried adding columnSpacing but that cuts off the right side of the table and doesn't adjust columns individually.
Below is my code and a screenshot of my current UI.
Widget build(BuildContext context){
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Column(
children: [
PaginatedDataTable(
source: data,
columns: [
DataColumn(label: Text('Name')),
DataColumn(label: Text('Amount')),
DataColumn(label: Text('Price')),
DataColumn(label: Text('Total')),
],
rowsPerPage: 10,
),
],
),
),
)
);
}
Thanks in advance.
Try to play with options
double horizontalMargin = 24.0, double columnSpacing = 56.0
of PaginatedDataTable.
Right now no other ways to tune the spacing between columns.
I've managed to fix this by using this package: https://pub.dev/packages/data_table_2. Which is nearly the same as the flutter built in widget, but this one has way more options to modify the table.
I have a screen as the below one:
So I need now to remove the columns with name Name & Value and just keep the rows or even set the column visible, I tried to create DataTable without Column by removing them it gives me an error and conflicts, as it's gives me the below error:
'package:flutter/src/material/data_table.dart': Failed assertion: line 419 pos 15: 'columns != null': is not true.
So there's any way to remove this?
Here's a small part for my code:
DataTable(
columnSpacing: 83,
dataRowHeight: double.parse('20'),
columns: [
DataColumn(label: Text('Name')),
DataColumn(
label: Row(
children: <Widget>[
Text('Value'),
],
)),
],
rows: [
DataRow(cells: [
DataCell(Row(
children: <Widget>[
Text('Sim operator'),
],
)),
DataCell(
Text(simInfo.operator == null
? ' '
: simInfo.operator),
),
]),
DataRow(cells: [
DataCell(Row(
children: <Widget>[
Text('ICCID'),
],
)),
DataCell(
Text(simInfo == null ? '' : simInfo.iccid)),
]),
],
),
if you want to don't show column title, set them as empty Text and set headingRowHeight property to 0 or another small number.
DataTable(
columnSpacing: 83,
headingRowHeight: 0,
dataRowHeight: double.parse('20'),
columns: [
DataColumn(label: Text('')),
DataColumn(label: Text('')),
],
rows: [
...
],
),
another way is use Table widget that you have much control on details
https://api.flutter.dev/flutter/widgets/Table-class.html
You can easily change the Text('some data text', style: TextStyle(color: Colors.transparent))
But alternatively I will recommend you take a moment to understand the data and create a class that fits your data - model. In order you can take whatever data directly from the corresponding data - object. And display it wherever you want.
Otherwise you can use a Stack() widget. Syntax like a Column or Row // with children[] // and just put a container above it.
I'm trying to implement a DataTable where the content is scrollable.
The issue is that the whole Table is scrollable, but I want the header to be static.
Does someone have an idea how to realize this?
Maybe two seperated DataTables? One just with the header and another scrollable one just with the content.
Though I think there must be a more elegant way to do this.
Here is my current, custom DataTable widget:
Widget _widgetDatatable(List<Client> clients) {
return Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child:
DataTable(
showCheckboxColumn: false,
columns: [
DataColumn(label: Text('Name')),
DataColumn(label: Text('First')),
DataColumn(label: Text('Date Birth')),
DataColumn(label: Text('Date Moved In')),
],
rows: clients
.map(
(e) => DataRow(
onSelectChanged: (value) {
bloc.dataRowKlientSingleClicked(e);
},
selected: e.clickedInDataTable,
cells: [
DataCell(Text(e.lastName)),
DataCell(Text(e.firstName)),
DataCell(
Text(format(e.dateOfBirth)),
),
DataCell(
Text(format(e.dateMovedIn)),
),
]),
)
.toList()),
),);
}
At the moment, there is no option to do this with the DataTable widget. But luckily, there is a package that implements a table that can do just that: table_sticky_headers.
I'd like to implement dismissible or swipe action for DataRow inside DataTable. So far I can only find such feature mostly used/shown on Lists. The reason I'm using DataTable is because I'd like to show horizontal scroll available data list and show as in data table style. Here is my code and I'd much appreciate if there's any pointer available.
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: [
DataColumn(label: Text('Date')),
DataColumn(label: Text('Customer')),
DataColumn(label: Text('Amount'), numeric: true),
DataColumn(label: Text('Remark')),
],
rows: snapshot.data
.map(
(item) => DataRow(
cells: [
DataCell(Text(
DateFormat('yyyy/MM/dd').format(item.date))),
DataCell(Text(item.customerName)),
DataCell(
Text(NumberFormat().format(item.amount))),
DataCell(Text(item.remark)),
],
),
)
.toList(),
),
),
Thanks!
I have a datatable that are filled by results from mysql. The number of rows depends on the number of results from the mysql. I need to the DataTable fill by rows all empty screen space, whatever of the number of mysql results. In other words: the top of DataTable rows will be filled, and the bottom ones will be empty if number of results is less than the rows number.
How it works now:
SingleChildScrollView _dataColumn() {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
child: CustomDataTable(
columns: [
DataColumn(
label: Text('Teachers'),
),
],
rows: _filterEmployees
.map(
(employee) => DataRow(cells: [
DataCell(
Text(
employee.teachName,
),
onTap: () {
...
});
},
),
]),
)
.toList(),
),
),
);
}
Why not just use List Generate for a fixed number of iterations and mapping over the number in the employees.
SingleChildScrollView _dataColumn() {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
child: CustomDataTable(
columns: [
DataColumn(
label: Text('Teachers'),
),
],
rows:
List<int>.generate(10, (i) => i).map((num) {
if (num < _filterEmployees.length) {
return _filterEmployees[num];
}
//Default Employee object
return Employee();
}).map((employee) => DataRow(cells: [
DataCell(
Text(
employee.teachName,
),
onTap: () {
...
});
},
),
]),
)
.toList(),
),
),
);
}
Now your Datatable will always consist of 10 entries, first entries will be filled but later on there will be empty entries.