How to add buttons into datatables in flutter?

Question

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(""),

Answer 1

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,
    };
  }
}