New Table versus Legacy Table

[mdsmith1]

I wanted to comment on the new table with a + button etc. and words about deprecating the Legacy Table.

Users want something that looks good in spite of the underlying funtionality.

I have shown screen captures of the Legacy Table and the New Table and I have added some notations about how the appearance of the New Table might be improved.

I think we should attend to these improvements before consideration of deprecating the Lagacy Table.

Mike

Legacy Table

New Table

[Paulo]

For the header background, click the "+" sign on Styles and we should find a "Header background" option we can edit:

For the background color of the selected row, here is how to achieve this using Custom CSS:

Conditionally set table row text color with currentRow

Adding on here! If you'd like to change the text color of only the selectedRow, you can use some custom CSS (docs and community forum guide). Here's the code I'm using: #table2--0 li[aria-selected=true] div { color: red; } You'll likely just need to change the table name in the CSS for it to work on your end. Let us know if you have any questions! [image]

We could also customize it according to the values of each row:

Color code a column in a table based on its value

Hello, self in new table is point to table itself. I try item is ok. but still with error tooltip. pls help to fix this wrong tooltip, we can get item in the background option's scope. [image]

[mdsmith1]

Paulo:

You are explaining the header background color which I already acknowledged.

Above the header is a blank space. I am asking that the blank space be given the same color as the header space as it is with the legacy table.

Mike

[Paulo]

Thanks for specifying! We could also go the Custom CSS route for this.

To find the correct selector:

In Preview mode, go to the Chrome dev tools, use the select element option circled in this screenshot:

Note: Click the bar on your app and you'll see the HTML element selected on the right.

Then, right click the element and copy the selector:

You should get something similar to this:
#table1--0 > div.kIXRJj

We can use that selector in Custom CSS to add any styling:

[mdsmith1]

Paulo:

Could you not just make this the default header coloring like we had in the Legacy Grid?

Mike

[Paulo]

We created the feature request for it. We'll let you know when we get any updates on it. On the meantime, we could use Custom CSS.

[mdsmith1]

I will look forward to the grade.

I have tried the CSS styling code and it doesn't seem to work.

Mike

Big Picture

Close up of Code

[Paulo]

Did you go through these steps to get the selector? The selector will most likely be different on your app.

@Paulo

In Preview mode, go to the Chrome dev tools, use the select element option circled in this screenshot:

Note: Click the bar on your app and you'll see the HTML element selected on the right.

Then, right click the element and copy the selector:

You should get something similar to this:
#table1--0 > div.kIXRJj