windowsflutterdartflutter-datatable
How to add buttons into datatables in flutter?
I am using this package for flutter datables but the problem with this pakage is i am not able to add widget in this datatables row...
Is anyone has any idea how can I do that ? I tried other packages but this is really nice. but this has that problem...
I want to add edit,print,view button in the row but Not able to add...
code
List<Map<String, dynamic>> data = [
{
"_id": 1,
"invoice_no": "101101",
"counter": "Satara",
"customer": "Swapnil Mane",
"customer_type": "Mart",
"date": "20-10-2022",
"qty": "10002",
"grand_total": 2000,
"status": "Done"
},
];
WebDataTable(
initialFirstRowIndex: 0,
rowsPerPage: 12,
source: WebDataTableSource(
sortAscending: true,
columns: [
WebDataColumn(
sortable: true,
name: '_id',
label: const Text('Sr. No'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'invoice_no',
label: const Text('Invoice No'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'counter',
label: const Text('Counter Name'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'customer',
label: const Text('Customer Name'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'customer_type',
label: const Text('Customer Type'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'date',
label: const Text('Date & Time'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'qty',
label: const Text('Qty'),
dataCell: (value) => DataCell(Text('$value')),
sortable: true,
),
WebDataColumn(
name: 'grand_total',
label: const Text('Grand Total'),
dataCell: (value) => DataCell(Text('$value')),
sortable: true,
),
],
rows: data),
header: Text(""),
Solution
You can simply add a widget to this package in each row. and this example used is in the same package with some changes to accept widget.
here is the example code
main.dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_web_data_table/web_data_table.dart';
import 'sample_data.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late String _sortColumnName;
late bool _sortAscending;
List<String>? _filterTexts;
bool _willSearch = true;
Timer? _timer;
int? _latestTick;
List<String> _selectedRowKeys = [];
int _rowsPerPage = 10;
@override
void initState() {
super.initState();
_sortColumnName = 'browser';
_sortAscending = false;
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
if (!_willSearch) {
if (_latestTick != null && timer.tick > _latestTick!) {
_willSearch = true;
}
}
if (_willSearch) {
_willSearch = false;
_latestTick = null;
setState(() {
if (_filterTexts != null && _filterTexts!.isNotEmpty) {
_filterTexts = _filterTexts;
print('filterTexts = $_filterTexts');
}
});
}
});
}
@override
void dispose() {
super.dispose();
_timer?.cancel();
_timer = null;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('WebDataTable Sample'),
),
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(8.0),
child: WebDataTable(
header: Text('Sample Data'),
actions: [
if (_selectedRowKeys.isNotEmpty)
SizedBox(
height: 50,
width: 100,
child: MaterialButton(
color: Colors.red,
child: Text(
'Delete',
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {
print('Delete!');
setState(() {
_selectedRowKeys.clear();
});
},
),
),
Container(
width: 300,
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
hintText: 'increment search...',
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFCCCCCC),
),
),
border: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFCCCCCC),
),
),
),
onChanged: (text) {
_filterTexts = text.trim().split(' ');
_willSearch = false;
_latestTick = _timer?.tick;
},
),
),
],
source: WebDataTableSource(
sortColumnName: _sortColumnName,
sortAscending: _sortAscending,
filterTexts: _filterTexts,
columns: [
WebDataColumn(
name: 'id',
label: const Text('ID'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'renderingEngine',
label: const Text('Rendering engine'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'browser',
label: const Text('Browser'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'platform',
label: const Text('Platform(s)'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'engineVersion',
label: const Text('Engine version'),
dataCell: (value) => DataCell(Text('$value')),
),
WebDataColumn(
name: 'cssGrade',
label: const Text('CSS grade'),
dataCell: (value) => DataCell(Text('$value')),
sortable: false,
),
WebDataColumn(
name: 'dateTime',
label: const Text('DateTime'),
dataCell: (value) {
if (value is DateTime) {
final text =
'${value.year}/${value.month}/${value.day} ${value.hour}:${value.minute}:${value.second}';
return DataCell(Text(text));
}
return DataCell(Text(value.toString()));
},
filterText: (value) {
if (value is DateTime) {
return '${value.year}/${value.month}/${value.day} ${value.hour}:${value.minute}:${value.second}';
}
return value.toString();
}),
WebDataColumn(
name: 'btn',
label: const Text('btn'),
dataCell: (value) {
return DataCell(value);
},
filterText: (value) {
if (value is DateTime) {
return '${value.year}/${value.month}/${value.day} ${value.hour}:${value.minute}:${value.second}';
}
return value.toString();
}),
],
rows: SampleData().data,
selectedRowKeys: _selectedRowKeys,
onTapRow: (rows, index) {
print('onTapRow(): index = $index, row = ${rows[index]}');
},
onSelectRows: (keys) {
print('onSelectRows(): count = ${keys.length} keys = $keys');
setState(() {
_selectedRowKeys = keys;
});
},
primaryKeyName: 'id',
),
horizontalMargin: 100,
onPageChanged: (offset) {
print('onPageChanged(): offset = $offset');
},
onSort: (columnName, ascending) {
print(
'onSort(): columnName = $columnName, ascending = $ascending');
setState(() {
_sortColumnName = columnName;
_sortAscending = ascending;
});
},
onRowsPerPageChanged: (rowsPerPage) {
print('onRowsPerPageChanged(): rowsPerPage = $rowsPerPage');
setState(() {
if (rowsPerPage != null) {
_rowsPerPage = rowsPerPage;
}
});
},
rowsPerPage: _rowsPerPage,
),
),
),
),
);
}
}
sample_data.dart
import 'package:flutter/material.dart';
class SampleData {
List<Map<String, dynamic>> get data =>
sampleDataRows.map((row) => row.values).toList();
final List<SampleDataRow> sampleDataRows = [
SampleDataRow.fromList([
'010',
'Gecko',
'Firefox 3.0',
'Win 2k+ / OSX.3+',
'1.9',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),color: Colors.red,)),
SampleDataRow.fromList([
'011',
'Gecko',
'Camino 1.0',
'OSX.2+',
'1.8',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),color: Colors.blue,)),
SampleDataRow.fromList([
'012',
'Gecko',
'Camino 1.5',
'OSX.3+',
'1.8',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),color: Colors.yellow,)),
SampleDataRow.fromList([
'013',
'Gecko',
'Netscape 7.2',
'Win 95+ / Mac OS 8.6-9.2',
'1.7',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'014',
'Gecko',
'Netscape Browser 8',
'Win 98SE+',
'1.7',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'015',
'Gecko',
'Netscape Navigator 9',
'Win 98+ / OSX.2+',
'1.8',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'016',
'Gecko',
'Mozilla 1.0',
'Win 95+ / OSX.1+',
'1',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'017',
'Gecko',
'Mozilla 1.1',
'Win 95+ / OSX.1+',
'1.1',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'018',
'Gecko',
'Mozilla 1.2',
'Win 95+ / OSX.1+',
'1.2',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'019',
'Gecko',
'Mozilla 1.3',
'Win 95+ / OSX.1+',
'1.3',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'020',
'Gecko',
'Mozilla 1.4',
'Win 95+ / OSX.1+',
'1.4',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'021',
'Gecko',
'Mozilla 1.5',
'Win 95+ / OSX.1+',
'1.5',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'022',
'Gecko',
'Mozilla 1.6',
'Win 95+ / OSX.1+',
'1.6',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'023',
'Gecko',
'Mozilla 1.7',
'Win 98+ / OSX.1+',
'1.7',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'024',
'Gecko',
'Mozilla 1.8',
'Win 98+ / OSX.1+',
'1.8',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'025',
'Gecko',
'Seamonkey 1.1',
'Win 98+ / OSX.2+',
'1.8',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'026',
'Gecko',
'Epiphany 2.20',
'Gnome',
'1.8',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'027',
'Webkit',
'Safari 1.2',
'OSX.3',
'125.5',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'028',
'Webkit',
'Safari 1.3',
'OSX.3',
'312.8',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'029',
'Webkit',
'Safari 2.0',
'OSX.4+',
'419.3',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'030',
'Webkit',
'Safari 3.0',
'OSX.4+',
'522.1',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'031',
'Webkit',
'OmniWeb 5.5',
'OSX.4+',
'420',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'032',
'Webkit',
'iPod Touch / iPhone',
'iPod',
'420.1',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'033',
'Webkit',
'S60',
'S60',
'413',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'034',
'Presto',
'Opera 7.0',
'Win 95+ / OSX.1+',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'035',
'Presto',
'Opera 7.5',
'Win 95+ / OSX.2+',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'036',
'Presto',
'Opera 8.0',
'Win 95+ / OSX.2+',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'037',
'Presto',
'Opera 8.5',
'Win 95+ / OSX.2+',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'038',
'Presto',
'Opera 9.0',
'Win 95+ / OSX.3+',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'039',
'Presto',
'Opera 9.2',
'Win 88+ / OSX.3+',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'040',
'Presto',
'Opera 9.5',
'Win 88+ / OSX.3+',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'041',
'Presto',
'Opera for Wii',
'Wii',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'042',
'Presto',
'Nokia N800',
'N800',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'043',
'Presto',
'Nintendo DS browser',
'Nintendo DS',
'8.5',
'C/A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'044',
'KHTML',
'Konqureror 3.1',
'KDE 3.1',
'3.1',
'C',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'045',
'KHTML',
'Konqureror 3.3',
'KDE 3.3',
'3.3',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'046',
'KHTML',
'Konqureror 3.5',
'KDE 3.5',
'3.5',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'047',
'Tasman',
'Internet Explorer 4.5',
'Mac OS 8-9',
'-',
'X',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'048',
'Tasman',
'Internet Explorer 5.1',
'Mac OS 7.6-9',
'1',
'C',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'049',
'Tasman',
'Internet Explorer 5.2',
'Mac OS 8-X',
'1',
'C',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'050',
'Misc',
'NetFront 3.1',
'Embedded devices',
'-',
'C',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'051',
'Misc',
'NetFront 3.4',
'Embedded devices',
'-',
'A',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'052',
'Misc',
'Dillo 0.8',
'Embedded devices',
'-',
'X',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'053',
'Misc',
'Links',
'Text only',
'-',
'X',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'054',
'Misc',
'Lynx',
'Text only',
'-',
'X',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'055',
'Misc',
'IE Mobile',
'Windows Mobile 6',
'-',
'C',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
SampleDataRow.fromList([
'056',
'Misc',
'PSP browser',
'PSP',
'-',
'C',
'2020-10-10 13:30:30',
],MaterialButton(onPressed: (){},child: Text("Button"),)),
];
}
class SampleDataRow {
SampleDataRow._({
required this.id,
required this.renderingEngine,
required this.browser,
required this.platform,
required this.engineVersion,
required this.cssGrade,
required this.dateTime,
required this.btn,
});
factory SampleDataRow.fromList(List<String> values,Widget child) {
return SampleDataRow._(
id: values[0],
renderingEngine: values[1],
browser: values[2],
platform: values[3],
engineVersion: values[4],
cssGrade: values[5],
dateTime: DateTime.parse(values[6]),
btn: child,
);
}
final String id;
final String renderingEngine;
final String browser;
final String platform;
final String engineVersion;
final String cssGrade;
final Widget btn;
final DateTime dateTime;
Map<String, dynamic> get values {
return {
'id': id,
'renderingEngine': renderingEngine,
'browser': browser,
'platform': platform,
'engineVersion': engineVersion,
'cssGrade': cssGrade,
'dateTime': dateTime,
'btn': btn,
};
}
}