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.
Related
I'm passing data to a datatable located in the child widget from parent widget. I need to set a textstyle to the text in whole datatable how can I do that?
Child widget
Container(
child: widget.dataTable,
)
Parent widget
DataTable(headingRowHeight: 0, columns: [
DataColumn(label: Text(' ')),
DataColumn(label: Text(' ')),
], rows: [
DataRow(
cells: [DataCell(Text('John')), DataCell(Text('department1'))])
])
Inside DataTable widget, you can find properties called dataTextStyle.
Then you can use TextStyle as usual. Example:
DataTable(
headingRowHeight: 0,
headingTextStyle: TextStyle(fontSize:14, ...),
// for Heading Text Style
dataTextStyle: TextStyle(fontSize: 12, ...),
// for Text Style inside Data Rows
columns:[],
rows:[],
),
you can check here for more advance.
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.
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'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'm trying to have multiple, centered lines in the DataColumn() row of a DataTable() in flutter. It seems, though, that there is no support for centering or for multiple lines.
My DataTable Code looks something like this:
class TestDayData extends StatelessWidget {
final List<String> timesList = [
"This is",
"a bunch",
"of strings",
];
final String day;
TestDayData({Key key, this.day}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: DataTable(
showCheckboxColumn: false,
columns: [
DataColumn(
label: Center(child: Text(day)),
numeric: false,
),
],
rows: timesList
.map(
(times) => DataRow(cells: [
DataCell(
Text(times.toString()),
),
]),
)
.toList(),
),
);
}
}
I made a dartpad file here to show the above code in a larger context. (the reason that I am putting multiple DataTables in a Row widget, instead of using one DataTable for all of the days, is because I plan on putting each of them into a Stack widget so that I can overlay appointments on top of the columns.)
https://dartpad.dev/44bbb788e0d5f1e6393dd38a29430981
So far, I can approximate a multi-lined, centered DataColumn row by adding spaces and using a newline character as seen in the dartpad file. (but there has to be a better way!)
You are missing textAlign property in Text widget
DataTable(
showCheckboxColumn: false,
columns: [
DataColumn(
label: Center(child: Text(day, textAlign:TextAlign.center)),
numeric: false,
),
],
rows: timesList
.map((times) => DataRow(cells: [
DataCell(
Text(times.toString(), textAlign: TextAlign.center),
),
]),
)
.toList(),
),
You can try this to center your text in Datacolumn
DataColumn(
label: Center( widthFactor: 1.4,
child: Text("HELLO", textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0,),),)),
You can try this to center your text in Datacell for rows.
DataCell( Center(child: Text("Hello")))
For me on the DataColumn, using the Center widget or the textAlign property on the Text widget didn't work:
this is my solution:
DataColumn(
label: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [Text("text")],
),
),
),
DataCell worked just fine with the Center widget
I figured out the solution.
you just need to wrap the text with Center widget and then wrap it again with Expanded widget just like this:
DataTable(
columns: [
DataColumn(label: Expanded(child: Center(child: Text('ID', textAlign: TextAlign.center,))),),
DataColumn(label: Expanded(child: Center(child: Text('name', textAlign: TextAlign.center,)))),
]
)