Search code examples
flutterdatatablecolumnsorting

How to add more than 5 columns in flutter using datatable

I am creating a DataTable in flutter, the problem is it only shows 3 column clearly, and i can't scroll left or right to view more data

here is the output of my code

enter image description here

and here is my Datatable code

Padding(padding: EdgeInsets.fromLTRB(5, 120, 0, 0),
      child:DataTable(  
        
              columns: [  
                DataColumn(
                  label: Text(  
                    'S.no',  
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)  
                )),  
                DataColumn(label: Text(  
                    'Code',  
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)  
                )),  
                DataColumn(label: Text(  
                    'Name',  
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)  
                )), 
                DataColumn(label: Text(  
                    'Designation',  
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)  
                )), 
              ],  
              rows: [  
                DataRow(cells: [  
                  DataCell(Container(width:20,child:Text('1'))),  
                  DataCell(Text('ENG-010')),  
                  DataCell(Text('abc')),
                  DataCell(Text('Asst Software Engineer')),  
                ]),  
                DataRow(cells: [  
                  DataCell(Text('2')),  
                  DataCell(Text('ENG-011')),  
                  DataCell(Text('abc')),  
                  DataCell(Text('MERN developer')),
                ]),  
                DataRow(cells: [  
                  DataCell(Text('3')),  
                  DataCell(Text('ENG-011')),  
                  DataCell(Text('abc')),  
                  DataCell(Text('Php developer')),
                ]),  
                  
              ],  
            ),  
      )])

i used width on DataRow but nothing helpful.

Solution

  • https://youtu.be/ktTajqbhIcY?t=63

    Wrap your DataTable in SingleChildScrollView for handling the overflow.
    You might need 2; one for vertical scroll and one for horizontal scroll.

    SingleChildScrollView
    scrollDirection: Axis.vertical
    child: SingleChildScrollView
        scrollDirection: Axis.horizontal
        child: DataTable