Flutter datatable column width

Flutter DataTable Column Width

In Flutter’s DataTable widget, you can control the width of each column by specifying a fixed width or using flex ratios.

1. Fixed Width:

You can set a fixed width for a column using the DataColumn’s width property. This property takes a double value representing the width in logical pixels.

   
   DataTable(
     columns: [
       DataColumn(
         label: Text('Name'),
         width: 100, // Set a fixed width
       ),
       DataColumn(
         label: Text('Age'),
       ),
       DataColumn(
         label: Text('Gender'),
       ),
     ],
     rows: [...],
   )
   
   

In the above example, the first column will have a fixed width of 100 logical pixels, while the width of the remaining columns will be determined by the content.

2. Flexible Width:

If you want the columns to have flexible widths based on their content or remaining space, you can use the DataColumn’s flex property. This property takes an integer value representing the flex ratio.

   
   DataTable(
     columns: [
       DataColumn(
         label: Text('Name'),
         flex: 2, // Takes 2/5 of the remaining space
       ),
       DataColumn(
         label: Text('Age'),
       ),
       DataColumn(
         label: Text('Gender'),
         flex: 3, // Takes 3/5 of the remaining space
       ),
     ],
     rows: [...],
   )
   
   

In the above example, the first column will take 2/5 of the remaining space, the second column will have a width determined by its content, and the third column will take 3/5 of the remaining space. The remaining space is distributed among the columns based on their flex ratios.