How to remove CheckBox icon of DataTable in Flutter?

Question

I'm implementing a DataTable to show some data, to do this I'm using a PaginatedDataTable, so I can load and show my data, the problem is that my DataTable shows a CheckBox per row and I don't want it.

This is my current result:

I want remove these CheckBox but I not have idea how to do it.

Code:

ExpensesDataSource _expensesDataSource = ExpensesDataSource([expense]);

    Widget getDataTable() {
      return PaginatedDataTable(
        header: Text('Despesas', style: TextStyle(color: Color(0xFF4C4C4C), fontWeight: FontWeight.bold, fontSize: 15),),
        columns: <DataColumn>[
          DataColumn(
            label: Text("Data"),
            numeric: false,
          ),
          DataColumn(
            label: Text("Descrição"),
            numeric: false,
          ),
          DataColumn(
            label: Text("Total"),
            numeric: false,
          ),
        ],
        source: _expensesDataSource,
      );
  }


class ExpensesDataSource extends DataTableSource {

  List<Expense> _expenses = <Expense>[];
  int _selectedCount = 0;

  ExpensesDataSource(List<Expense> listExpenses) {
      this._expenses = listExpenses;
  }

  @override
  DataRow getRow(int index) {
    final Expense expense = _expenses[index];
    return DataRow.byIndex(
        index: index,
        onSelectChanged: (bool value) {
          print('Row selected: $value ${expense.name}');
        },
        cells: [
          DataCell(Text(expense.date)),
          DataCell(Text(expense.name)),
          DataCell(Text(Utils.convert2currency(expense.total_amount)))
        ]
    );
  }

  @override
  // TODO: implement rowCount
  int get rowCount => _expenses.length;

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => _selectedCount;

}

I believe this link here should clear all your doubts. [Flutter DataTable - Tap on row](https://stackoverflow.com/a/58900780/6889637) — Michel Thomas, Nov 21 '19 at 14:35

Shady Boshra · Answer 1 · 2020-07-25T11:45:48.670

UPDATE

Available now on Stable channel.

It's possible if you are on master channel not on stable channel.

You have to add only one property to DataTable which is showCheckboxColumn to be false.

Your full code after edit will be

@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
        title: Text(
          "Sample",
          style: TextStyle(color: Colors.white),
        ),
    body: Column(children: <Widget>[
      DataTable(
        showCheckboxColumn: false,
        sortAscending: true,
        columns: <DataColumn>[
          DataColumn(
            label: Text('Product name'),
          ),
          DataColumn(
            label: Text('Product Quantity'),
          ),
        ],
        rows: items
            .map(
              (itemRow) => DataRow(
                onSelectChanged: (bool selected) {
                  if (selected) {
                    //'row-selected: ${itemRow.index}'
                  }
                },
                cells: [
                  DataCell(
                    Text(itemRow.itemName),
                    showEditIcon: false,
                    placeholder: false,
                  ),
                  DataCell(
                    Text(itemRow.itemQuantity),
                    showEditIcon: true,
                    placeholder: false,
                    //onTap: _getSelectedRowInfo,
                  ),
                ],
              ),
            )
            .toList(),
      )
    ]),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ));
  }
}

Some flutter developer doesn't recommend change to master, but if no problem with you, you can change it using these commands: flutter channel master flutter upgrade

This will get rid of the check box from all rows. I would like to figure out a way to get rid of the checkbox on a row by row basis. Such as from the above image, row 1 should have the check box because there is data in there but rows 2 and greater shouldn't have a selection checkbox. — jaredbaszler, Oct 06 '20 at 21:28

score 1 · Answer 2 · answered Jan 11 '23 at 08:06

You have to add only one property to DataTable which is showCheckboxColumn to be false.

Your full code after the edit will be:

@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
        title: Text(
          "Sample",
          style: TextStyle(color: Colors.white),
        ),
    body: Column(children: <Widget>[
      DataTable(
        showCheckboxColumn: false,
        sortAscending: true,
        columns: <DataColumn>[
          DataColumn(
            label: Text('Product name'),
          ),
          DataColumn(
            label: Text('Product Quantity'),
          ),
        ],
        rows: items
            .map(
              (itemRow) => DataRow(
                onSelectChanged: (bool selected) {
                  if (selected) {
                    //'row-selected: ${itemRow.index}'
                  }
                },
                cells: [
                  DataCell(
                    Text(itemRow.itemName),
                    showEditIcon: false,
                    placeholder: false,
                  ),
                  DataCell(
                    Text(itemRow.itemQuantity),
                    showEditIcon: true,
                    placeholder: false,
                    //onTap: _getSelectedRowInfo,
                  ),
                ],
              ),
            )
            .toList(),
      )
    ]),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ));
  }
}

Günter Zöchbauer · Answer 3 · 2019-02-13T11:54:08.347

0

Currently only by omitting onSelectionChange: ... or passing null instead of

    onSelectChanged: (bool value) {
      print('Row selected: $value ${expense.name}');
    },

https://docs.flutter.io/flutter/material/DataRow/onSelectChanged.html

edited Feb 13 '19 at 11:54

answered Feb 13 '19 at 11:51

Günter Zöchbauer

623,577
216
2,003
1,567

And if I want liste the selection? – Augusto Feb 13 '19 at 11:52
Then there is currently no way to get rid of the checkbox as far as I know. – Günter Zöchbauer Feb 13 '19 at 11:54
I can change the CheckBox for another Icon or put on other side of table? – Augusto Feb 13 '19 at 11:54
1

As far as I know there is no other way to influence it except getting rid of it by not passing a selection changed handler. You could try to implement or extend `DataRow` and customize its behavior, but I don't know if this is possible. I'll reopen https://github.com/flutter/flutter/issues/26211 – Günter Zöchbauer Feb 13 '19 at 11:59

score 0 · Answer 4 · answered Jun 18 '19 at 19:09

0

I delete these two of selected: and onSelectChanged: in DataRow.byIndex() and checkbox gone.

answered Jun 18 '19 at 19:09

ThitSarNL

670
1
8
22

score 0 · Answer 5 · answered Sep 22 '19 at 17:54

Remove the onSelectChanged and selected property from DataRow and add this on each data cell..

DataCell(
    Text(
       employee.lastName.toUpperCase(),
    ),
    onTap: () {
      print("Tapped " + employee.firstName);
      // do whatever you want
    },
),

How to remove CheckBox icon of DataTable in Flutter?

5 Answers5

Linked