CODEWITHSUNDEEP
flutter
Dan
Dan

Reputation: 233

How do I change the column widths on a PaginatedDataTable?

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

Upvotes: 12

Views: 13012

Answers (3)

siddhartha sapkota
siddhartha sapkota

Reputation: 266

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

Upvotes: 5

alisonthemonster
alisonthemonster

Reputation: 1152

After this diff you can set horizontalMargin and columnSpacing to achieve custom column widths. 

  /// The horizontal margin between the edges of the table and the content
  /// in the first and last cells of each row.
  ///
  /// When a checkbox is displayed, it is also the margin between the checkbox
  /// the content in the first data column.
  ///
  /// This value defaults to 24.0 to adhere to the Material Design specifications.
  final double horizontalMargin;

  /// The horizontal margin between the contents of each data column.
  ///
  /// This value defaults to 56.0 to adhere to the Material Design specifications.
  final double columnSpacing;

Upvotes: 0

Veljko Vukovic
Veljko Vukovic

Reputation: 9

I've also encountered the same problem with the flexibility of flutter PaginatedDataTable layout. My solution was to extend the constructor of the DataTable with the layout variables:

FlexibleDataTable({
    Key key,
    @required this.columns,
    this.sortColumnIndex,
    this.sortAscending = true,
    this.onSelectAll,
    this.headingRowHeight = 56.0,
    this.dataRowHeight = 48.0,
    this.tablePadding = 24.0,
    this.columnSpacing = 56.0,
    this.sortArrowPadding = 2.0,
    this.headingFontSize = 12.0,
    @required this.rows,
  }

Of course I had to implement FlexiblePaginatedDatatable to use the FlexibleDataTable:

new SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: new FlexibleDataTable(
        key: _tableKey,
        columns: widget.columns,
        sortColumnIndex: widget.sortColumnIndex,
        sortAscending: widget.sortAscending,
        onSelectAll: widget.onSelectAll,
        columnSpacing: 20.0,
        dataRowHeight: 40.0,
        rows: _getRows(_firstRowIndex, widget.rowsPerPage)
    )
),

The Flutter team should include this features in the official version of DataTable and PaginatedDataTable so others don't need to implement ad hoc versions for such trivial stuff. The issue exists and we'll see when it will be done. https://github.com/flutter/flutter/issues/12775

Upvotes: -1

Related Questions