How do I use the built in function for sorting columns on DataTable
.
Is it possible to do for multiple columns, so that when I press the sort icon it actually sorts the list?
Thanks for any support : )
class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
var myColumns = [
new DataColumn(label: new Text('name')),
new DataColumn(label: new Text('age')),
new DataColumn(label: new Text('Hight')),
];
var myRows = [
new DataRow(cells: [
new DataCell(new Text('George')),
new DataCell(new Text('18')),
new DataCell(new Text('173cm')),
]),
new DataRow(cells: [
new DataCell(new Text('Dave')),
new DataCell(new Text('21')),
new DataCell(new Text('183cm')),
]),
new DataRow(cells: [
new DataCell(new Text('Sam')),
new DataCell(new Text('55')),
new DataCell(new Text('170cm')),
])
];
return new Scaffold(
body: new Center(
child: new Container(
child: new DataTable(
columns: myColumns,
rows: myRows,
sortColumnIndex: 0,
sortAscending: true,
)),
),
);
}
}
I have made some little editions in order to help those may are facing some issues.
class Person {
String name;
int age;
num hight;
Person({this.name, this.age, this hight});
}
class HomePageState extends State<HomePage> {
bool _sortNameAsc = true;
bool _sortAgeAsc = true;
bool _sortHightAsc = true;
bool _sortAsc = true;
int _sortColumnIndex;
List<Person> _persons;
@override
initState() {
super.initState();
_persons = [
Person(
name: 'George',
age: 18,
height: 173,
),
Person(
name: 'Dave',
age: 21,
height: 183,
),
Person(
name: 'Sam',
age: 55,
height: 170,
),
];
}
@override
Widget build(BuildContext context) {
var myColumns = [
DataColumn(
label: Text('name'),
onSort: (columnIndex, sortAscending) {
setState(() {
if (columnIndex == _sortColumnIndex) {
_sortAsc = _sortNameAsc = sortAscending;
} else {
_sortColumnIndex = columnIndex;
_sortAsc = _sortNameAsc;
}
_persons.sort((a, b) => a.name.compareTo(b.name));
if (!_sortAsc) {
_persons = _persons.reversed.toList();
}
});
},
),
DataColumn(
label: Text('age'),
onSort: (columnIndex, sortAscending) {
setState(() {
if (columnIndex == _sortColumnIndex) {
_sortAsc = _sortAgeAsc = sortAscending;
} else {
_sortColumnIndex = columnIndex;
_sortAsc = _sortAgeAsc;
}
_persons.sort((a, b) => a.age.compareTo(b.age));
if (!_sortAscending) {
_persons = _persons.reversed.toList();
}
});
},
),
DataColumn(
label: Text('Hight'),
onSort: (columnIndex, sortAscending) {
setState(() {
if (columnIndex == _sortColumnIndex) {
_sortAsc = _sortHeightAsc = sortAscending;
} else {
_sortColumnIndex = columnIndex;
_sortAsc = _sortHeightAsc;
}
_persons.sort((a, b) => a.height.compareTo(b.height));
if (!_sortAscending) {
_persons = _persons.reversed.toList();
}
});
},
),
];
var myRows = _persons.map((person) {
return DataRow(cells: [
DataCell( Text(person.name)),
DataCell( Text('${person.age}')),
DataCell( Text('${person.height}cm')),
]);
});
return Scaffold(
body: Center(
child: Container(
child: DataTable(
columns: myColumns,
rows: myRows.toList(),
sortColumnIndex: _sortColumnIndex,
sortAscending: _sortAsc,
)),
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With