How to remove CheckBox icon of DataTable in Flutter? - datatable

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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