Home > front end >  Set width of individual DataColumn in PaginatedDataTable
Set width of individual DataColumn in PaginatedDataTable

Time:12-16

I have a PaginatedDataTable with 4 DataColumns. Because I have 4 columns they also don't fit on my page which makes it so you have to horizontally scroll. Only the first DataColumn is a string for name and the 3 other columns will take an int value. Therefore they shouldn't be that long.

How can I set the width for individual DataColumns? I also tried adding columnSpacing but that cuts off the right side of the table and doesn't adjust columns individually.

Below is my code and a screenshot of my current UI.

Widget build(BuildContext context){
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(4.0),
          child: Column(
            children: [
              PaginatedDataTable(
                source: data,
                columns: [
                  DataColumn(label: Text('Name')),
                  DataColumn(label: Text('Amount')),
                  DataColumn(label: Text('Price')),
                  DataColumn(label: Text('Total')),
                ],
                rowsPerPage: 10,
              ),
            ],
          ),
        ),
      )
    );
  }

enter image description here

Thanks in advance.

CodePudding user response:

Try to play with options

double horizontalMargin = 24.0, double columnSpacing = 56.0

of PaginatedDataTable.

Right now no other ways to tune the spacing between columns.

CodePudding user response:

I've managed to fix this by using this package: https://pub.dev/packages/data_table_2. Which is nearly the same as the flutter built in widget, but this one has way more options to modify the table.

  • Related