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.
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.
How to get the cell width AND height of a table / datatable (or other widget) to adjust depending on the content, how do you do this in Flutter?
This is the default table behaviour in HTML and I want that in Flutter because it is the best way to fit as much data as possible in a table.
Using a DataTable, the widths of each cell expand based on the length of the text in the cells. However, the cell heights (or row height) doesn't expand.
DataTable text truncates where the text is too long; the height of the cell is not expanded:
Using a Table widget, the width of the cells do not adjust depending on the length of the content. The column widths do contract & expand but only as a fraction of the total allocated space for the widget and not depending on their content (using columnWidths & FixedColumnWidth).
Here, note how 'Medium column' has space to its right, 'Long column' should have expanded into that space:
class TableDemo extends StatelessWidget {
Widget build(BuildContext context) {
return Table(
columnWidths: {
0: FixedColumnWidth(20),
},
defaultColumnWidth: FlexColumnWidth(),
children: [
TableRow(children: [Text('Short column'), Text('Long column'), Text('Medium column')]),
TableRow(
children: [
Text('1'),
Text('Some long content i would like to be wrapped when column width is not enought to fully display it'),
Container(
child: Text('Some more text'),
)
],
)
],
);
}
}
class DataTableDemo extends StatelessWidget {
Widget build(BuildContext context) {
return DataTable(
columns: [
DataColumn(label: Container(child: Text("Short column"), width: 100)),
DataColumn(label: Container(child: Text("Long column"), width: 100)),
DataColumn(label: Container(child: Text("Medium column"), width: 100)),
],
rows: [
DataRow(
cells: [
DataCell(Text('1')),
DataCell(Text(//
'Some long content i would like to be wrapped when column width is not enought to fully display it, Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not enought to fully display it')),
DataCell(Container(child: Text('Some more text'))),
],
),
DataRow(
cells: [
DataCell(Text('1')),
DataCell(Text('Some long content i would like to be wrapped when column width is not enought to fully display it')),
DataCell(Container(child: Text('Some more text'))),
],
),
DataRow(
cells: [
DataCell(Text('1')),
DataCell(Text('Some long content i would like to be wrapped when column width is not enought to fully display it')),
DataCell(Container(child: Text('Some more text'))),
],
),
],
);
}
}
Use https://api.flutter.dev/flutter/rendering/IntrinsicColumnWidth-class.html in the columnWidths property of 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'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,)))),
]
)