CODEWITHSUNDEEP
flutter
ler
ler

Reputation: 1606

Flutter DataTable remove extra padding

I want to display some data in a DataTable, i have 9 columns, all of them are number except the first one.

The problem i'm having is, i only see the first 5 columns, not because data are too long, but because there are a lot of space between every column.

enter image description here

Is there a way to make the DataColumn wrap the data with a padding i choose? This is my code:

Scaffold(
  appBar: AppBar(
    title: Text('DataTable Sample'),
  ),
  body: Container(
    child: DataTable(columns: <DataColumn>[
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('A'),
          ),
          DataColumn(
            label: Text('B'),
          ),
          DataColumn(
            label: Text('C'),
          ),
          DataColumn(
            label: Text('D'),
          ),
          DataColumn(
            label: Text('E'),
          ),
          DataColumn(
            label: Text('F'),
          ),
          DataColumn(
            label: Text('G'),
          ),
          DataColumn(
            label: Text('H'),
          ),
        ], rows: <DataRow>[
          DataRow(cells: [
            DataCell(Text('1 Boston')),
            DataCell(Text('3')),
            DataCell(Text('3')),
            DataCell(Text('7')),
            DataCell(Text('1')),
            DataCell(Text('30')),
            DataCell(Text('8')),
            DataCell(Text('+2')),
            DataCell(Text('-22')),
          ]),
          DataRow(cells: [
            DataCell(Text('2 London')),
            DataCell(Text('3')),
            DataCell(Text('4')),
            DataCell(Text('12')),
            DataCell(Text('44')),
            DataCell(Text('7')),
            DataCell(Text('44')),
            DataCell(Text('-98')),
            DataCell(Text('0')),
          ]),
          DataRow(cells: [
            DataCell(Text('3 Rome')),
            DataCell(Text('10')),
            DataCell(Text('50')),
            DataCell(Text('90')),
            DataCell(Text('4')),
            DataCell(Text('7')),
            DataCell(Text('33')),
            DataCell(Text('+5')),
            DataCell(Text('-61')),
          ]),
        ]
        )
  ),
);

Upvotes: 11

Views: 21380

Answers (7)

Denis Esin
Denis Esin

Reputation: 223

Try setting horizontalMargin to 0 as this value defaults to 24.0:

...
DataTable(
   horizontalMargin: 0,
   columnSpacing: 10,
   columns: [
...

Ref.Datatable horizontalMargin official documentation

Upvotes: 19

Kevin Ho
Kevin Ho

Reputation: 149

you can use SingleChildScrollView and FittedBox as its child.

Scaffold(
  appBar: AppBar(
    title: Text('DataTable Sample'),
  ),
  body: SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: FittedBox(
      child: DataTable(
        columns: <DataColumn>[
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('A'),
          ),
          DataColumn(
            label: Text('B'),
          ),
          DataColumn(
            label: Text('C'),
          ),
          DataColumn(
            label: Text('D'),
          ),
          DataColumn(
            label: Text('E'),
          ),
          DataColumn(
            label: Text('F'),
          ),
          DataColumn(
            label: Text('G'),
          ),
          DataColumn(
            label: Text('H'),
          ),
        ],
        rows: <DataRow>[
          DataRow(cells: [
            DataCell(Text('1 Boston')),
            DataCell(Text('3')),
            DataCell(Text('3')),
            DataCell(Text('7')),
            DataCell(Text('1')),
            DataCell(Text('30')),
            DataCell(Text('8')),
            DataCell(Text('+2')),
            DataCell(Text('-22')),
          ]),
          DataRow(cells: [
            DataCell(Text('2 London')),
            DataCell(Text('3')),
            DataCell(Text('4')),
            DataCell(Text('12')),
            DataCell(Text('44')),
            DataCell(Text('7')),
            DataCell(Text('44')),
            DataCell(Text('-98')),
            DataCell(Text('0')),
          ]),
          DataRow(cells: [
            DataCell(Text('3 Rome')),
            DataCell(Text('10')),
            DataCell(Text('50')),
            DataCell(Text('90')),
            DataCell(Text('4')),
            DataCell(Text('7')),
            DataCell(Text('33')),
            DataCell(Text('+5')),
            DataCell(Text('-61')),
          ]),
        ],
      ),
    ),
  ),
);

Upvotes: 14

Amal Jogy
Amal Jogy

Reputation: 27

Try passing columnSpacing parameter inside your 'DataTable()' function, it seems to accept it, The default value is 56, reducing it will cramp the columns and increasing it will spread data out

Upvotes: 2

Berhe Gebre
Berhe Gebre

Reputation: 19

To remove the space between every column, you can change the value of columnSpacing which is 56 by default.

Upvotes: 0

TheMri
TheMri

Reputation: 1297

Yes. Lately flutter team merged an update to this Widget. It is now only in the "master" channel (You are probably on "stable"), to switch run flutter channel master and then flutter upgrade in the terminal. After doing so you can control the space between each column by setting the columnSpacing parameter of DataTable. For further information check out this closed issue

Upvotes: 12

bunny
bunny

Reputation: 1366

Currently, even I am stuck with the same issue, but I have found an alternative to this problem where you can see all your 9 columns. Have a look if it can help you.

use SingleChildScrollView to scroll the Datatable horizontally

Scaffold(
appBar: AppBar(title: Text('DataTable Sample')),
body: data()
)

create a function outside "Widget build(BuildContext context) {}" as given below

SingleChildScrollView data() { 
return SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Container(
child: DataTable(columns: <DataColumn>[
      DataColumn(
        label: Text('Name'),
      ),
      DataColumn(
        label: Text('A'),
      ),
      DataColumn(
        label: Text('B'),
      ),
      DataColumn(
        label: Text('C'),
      ),
      DataColumn(
        label: Text('D'),
      ),
      DataColumn(
        label: Text('E'),
      ),
      DataColumn(
        label: Text('F'),
      ),
      DataColumn(
        label: Text('G'),
      ),
      DataColumn(
        label: Text('H'),
      ),
    ], rows: <DataRow>[
      DataRow(cells: [
        DataCell(Text('1 Boston')),
        DataCell(Text('3')),
        DataCell(Text('3')),
        DataCell(Text('7')),
        DataCell(Text('1')),
        DataCell(Text('30')),
        DataCell(Text('8')),
        DataCell(Text('+2')),
        DataCell(Text('-22')),
      ]),
      DataRow(cells: [
        DataCell(Text('2 London')),
        DataCell(Text('3')),
        DataCell(Text('4')),
        DataCell(Text('12')),
        DataCell(Text('44')),
        DataCell(Text('7')),
        DataCell(Text('44')),
        DataCell(Text('-98')),
        DataCell(Text('0')),
      ]),
      DataRow(cells: [
        DataCell(Text('3 Rome')),
        DataCell(Text('10')),
        DataCell(Text('50')),
        DataCell(Text('90')),
        DataCell(Text('4')),
        DataCell(Text('7')),
        DataCell(Text('33')),
        DataCell(Text('+5')),
        DataCell(Text('-61')),
      ]),
    ]
    )
  ),
  }

Let me know if it solves your problem

Upvotes: 1

Yash
Yash

Reputation: 6008

You can use Table instead of DataTable. For further reference - video.

This is how you can use it:

Scaffold(
    appBar: AppBar(title: Text('DataTable Sample')),
    body: Container(
      child: Table(
        columnWidths: {0:FractionColumnWidth(.2)},
        children: [
        TableRow(
          children: [
            Text("Name",),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
          ]
         ),
         TableRow(
          children: [
            Text("1 Boston",),
            Text('3',textAlign: TextAlign.center,),
            Text('3',textAlign: TextAlign.center,),
            Text('7',textAlign: TextAlign.center,),
            Text('1',textAlign: TextAlign.center,),
            Text('30',textAlign: TextAlign.center,),
            Text('8',textAlign: TextAlign.center,),
            Text('+2',textAlign: TextAlign.center,),
            Text('-22',textAlign: TextAlign.center,),
          ]
         ),
         TableRow(
          children: [
            Text('2 London',),
            Text('3',textAlign: TextAlign.center,),
            Text('4',textAlign: TextAlign.center,),
            Text('12',textAlign: TextAlign.center,),
            Text('44',textAlign: TextAlign.center,),
            Text('7',textAlign: TextAlign.center,),
            Text('44',textAlign: TextAlign.center,),
            Text('-98',textAlign: TextAlign.center,),
            Text('0',textAlign: TextAlign.center,),
          ]
         ),
        TableRow(
          children: [
              Text('3 Rome'),
              Text('10',textAlign: TextAlign.center,),
              Text('50',textAlign: TextAlign.center,),
              Text('90',textAlign: TextAlign.center,),
              Text('4',textAlign: TextAlign.center,),
              Text('7',textAlign: TextAlign.center,),
              Text('33',textAlign: TextAlign.center,),
              Text('+5',textAlign: TextAlign.center,),
              Text('-61',textAlign: TextAlign.center,),
          ]
         ),
        ]
      ),
    )
  ),

Upvotes: 1

Related Questions