Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I change the column widths on a PaginatedDataTable?

Tags:

flutter

Right now there is so much space between the columns, even when I have a 4 character header and a 1 to 3 digit value for ranking, it's as if I could fit 4x that in each column.

I tried using smaller fonts, but the separation stays the same.

Here's what I am using to setup the PaginatedDataTable. I can't find any parameters across the Table/Row/Cell/etc that seem like the will affect width. The space seems automatic, yet wholly unnecessary. Thanks.

enter image description here

Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: const Text('Tour Rankings')),
        body:
        new ListView(
            padding: const EdgeInsets.all(5.0),
            children: <Widget>[
              new PaginatedDataTable(
                  header: const Text('Current Rankings'),
                  rowsPerPage: _rowsPerPage,
                  onRowsPerPageChanged: (int value) { setState(() { _rowsPerPage = value; }); },
                  sortColumnIndex: _sortColumnIndex,
                  sortAscending: _sortAscending,
                  columns: <DataColumn>[
                    new DataColumn(
                        label: new Text('Rank', style: new TextStyle(fontSize: 8.0)),
                        numeric: true,
                        onSort: (int columnIndex, bool ascending) => _sort<num>((Player d) => d.rank, columnIndex, ascending)
                    ),
                    new DataColumn(
                        label: new Text('Prev', style: new TextStyle(fontSize: 8.0)),
                        numeric: true,
                        onSort: (int columnIndex, bool ascending) => _sort<num>((Player d) => d.prevRank, columnIndex, ascending)
                    ),...
like image 719
Dan Avatar asked Jan 12 '18 17:01

Dan


1 Answers

There is a property of paginated data table in flutter as columnSpacing. This value defaults to 56.0 as per Material Design specifications.

You can change the value as per your requirement to change the horizontal margin between the contents of columns.

              PaginatedDataTable(
                showCheckboxColumn: false,
                columnSpacing: 10.0,
                header: Center(
                  child: Text("Statement"),
                ),
                columns: [
                  DataColumn(label: Text("Date")),
                  DataColumn(label: Text("Particular")),
                  DataColumn(label: Text("Debit")),
                  DataColumn(label: Text("Credit")),
                  DataColumn(label: Text("Detail")),
                ],
                source: YourDataSource(),
              ),

It should look something like this: Changed column Width Image

like image 56
siddhartha sapkota Avatar answered Oct 10 '22 12:10

siddhartha sapkota