data_table_2
data_table_2 copied to clipboard
How to add spacing between rows in rounded style?
This might be a simple question but I am not able to find the solution for this after trying different things, so I am asking it here.
I am using the rounded style for one of my data tables (like this: https://maxim-saplin.github.io/data_table_2/#/datatable2). I have tried a few different properties but I am not able to add spacing between rows.
Thank you!
I faced a similar issue and resolved it as follows:
Note: This solution is for PaginatedDataTable.
1) Set columnSpacing:
Inside the PaginatedDataTable parameters, set:
columnSpacing: 0, // Prevents gaps in the color alignment
2) Add Rounded Borders to the First Column:
For the first DataCell (leftmost column), wrap the content in a Container with the following decoration:
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16),
bottomLeft: Radius.circular(16),
),
color: Colors.yourColor,
),
child: Text("Column Heading"),
)
3) Add Rounded Borders to the Last Column:
Similarly, for the last DataCell (rightmost column), use:
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(16),
bottomRight: Radius.circular(16),
),
color: Colors.yourColor,
),
child: Text("Column Heading"),
)
4) And of course don't forget the middle DataCell Container decorations
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: AppColors.yourColor),
child: Text("Your Middle Columns Headings"),
),
This approach ensures proper spacing and rounded borders while maintaining a clean, visually appealing table design.
Hi @Paularezk3, thank you for the response. I will try this.