Chore/add way to apply css classes to the table based on column, row, row index, and/or column index

topcoat-data / topcoat-public

TopCoat components, visualizations and themes

MIT License

1 stars 3 forks source link

Chore/add way to apply css classes to the table based on column, row, row index, and/or column index #209

Closed AriSorsko closed 1 year ago

AriSorsko commented 1 year ago

What this does

Mehak needs a way to style the first row in table, this addresses that need in a general way.

Notes for the reviewer

To test:

update revision in config.yml to "chore/add_first_and_last_row_css_classes_to_table"
build and sync
add ":cellCssFunction="(column, columnIndex, row, rowIndex) => { if (rowIndex === 0) return 'font-medium ' }" to a table
verify that the first row is bold

Missed anything?

[ ] Performance (customer with 200k users, customer with 1k orgs etc). Review the Performance documentation
[ ] Security aspects considered? Unhappy paths?
[ ] Have you accounted for accessibility?
[ ] Commit messages and bodies explain what and why?

More information

Screenshots / GIFs

Visuals that may help the reviewer. Please add screenshots, including URL if applicable, for any front end change. GIFs are most welcome!

egcastro commented 1 year ago

Is there anything preventing this to be done only using CSS? Example:

.row:first-child {
  font-weight: 500; //Or the CSS property needed.
}

egcastro commented 1 year ago

It will look similar to:

of course that this will depends on designs requirements.

AriSorsko commented 1 year ago

Where would that css live? It can't go in the table component itself without being applied to every table and styles aren't supported in pages, instead the "style" is just amended to the page as text:

At some point Topcoat should be updated to support styles in pages, but not without also supporting scoped styles + the deep selector or else the css will get really gnarly very quickly which is a whole different can of worms.

dbroudy commented 1 year ago

FYI, there's support for the style tag in the topcoat component and visualization parsers, and unit tests for it: https://github.com/snyk/topcoat-core/blob/main/tests/builder/parser/test_visualization_parser.py#L236-L244

Is there something different there than what's required here? Or is there some kind of bug? Might be an easy fix

AriSorsko commented 1 year ago

So adding styles to the page is not an easy fix, new pitch for adding that is here. But Mehak will still need a workaround until that is completed and I think that this will be useful in general anyway for things like highlighting cells that are out of a range etc.