data_table_2 icon indicating copy to clipboard operation
data_table_2 copied to clipboard

How to add spacing between rows in rounded style?

Open Parixit2411 opened this issue 10 months ago • 2 comments

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!

Parixit2411 avatar Jan 14 '25 00:01 Parixit2411

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.

Paularezk3 avatar Jan 21 '25 21:01 Paularezk3

Hi @Paularezk3, thank you for the response. I will try this.

Parixit2411 avatar Jan 22 '25 11:01 Parixit2411