dash_table.DataTable styling examples

Dash Python
1

Thanks so much to @chriddyp and the Dash team for the great new DataTable element – I have been excited to start putting it to use!

Would it be possible for someone to supply an example or two of how to style the DataTable (either with the style_* attributes or css) to yield something with a different overall visual flavour (e.g. Error 302 - JS.ORG or DataTables example - Bootstrap 4)? Is it possible to change the sorting look/behaviour to prompt sorting by clicking anywhere on the column header?

2

Did you see the styling chapter? https://dash.plot.ly/datatable/style It’s linked from the main documentation page: https://dash.plot.ly/datatable/

3

Hey @chriddyp, I read that chapter but I wasn’t able to find info on styling the sorting items in the header (icon, icon alignment, ability to treat whole column header as clickable for to induce sorting). Also, without knowing all of the admissible attributes for the style_* dicts, I couldn’t figure out how to do things like change row background colour upon hover. Apologies if I am missing something in the docs.

1 Like
4

Hi tsk, did you see https://dash.plot.ly/datatable/interactivity? It mentions sorting and other functions.

Also I would suggest @chriddyp that maybe underlining the titles in https://dash.plot.ly/datatable would be helpful since some people may not realize those titles are clickable. Also cuz pages like https://dash.plot.ly/dash-core-components have underlined the clickable titles.

5

Great idea, thanks! Just made a PR here: underline the chapter titles in dash datatable by chriddyp · Pull Request #270 · plotly/dash-docs · GitHub

6

@caiyij @chriddyp I saw the interactivity chapter and my issue is not with the sorting functionality. I am still wondering about some of the table styling options not explicitly covered in the examples.

For instance, how should I go about changing the row backgroundColor activated upon hover?

It looks like a dynamic index can’t be passed to an if statement on row_index within style_data_conditional. Can something representing tr:hover be passed to style_data or style_cell? Otherwise, if the css property is needed, what selector is required? I have looked to https://unpkg.com/dash-table@3.1.5/dash_table/bundle.js for hints (including trying to overwrite the --hover color variable), to no avail. Actually, even the css=[{"selector": ".dash-spreadsheet", "rule": 'font-family: "some_family"'}] example in https://dash.plot.ly/datatable/reference doesn’t seem to work for me (for reference, style_cell={'font-family': 'some_family'} works as expected).

Thanks for any help that can be provided.

7

I have a similar question – more examples around styling would be very helpful (ex: changing the sort icon size, alignment, etc. are also very relevant to me)!

1 Like
8

Hi,

for the sorting arrow position (move to the right side of the column name), I’m using this in my custom.css.

.dash-spreadsheet-container .sort
{
padding-left: 1em !important;
float: right !important;
}

9

I was able to change the hover color with this:

css= [{'selector': 'tr:hover', 'rule': 'background-color: pink;'}]

1 Like
10

I managed to change the sort icon alignment with CSS:

th.dash-header div{
  display:flex;
}

th.dash-header div span.column-header-name {
  order: 1;
}

th.dash-header div span.column-header--sort {
  order: 2;
  width: 100%;
  text-align: right;
}

span.column-header-name:after {
  content:"\00a0";
}

Hope it helps

1 Like
11

Is there documentation that goes over what CSS you can override for the datatable? Like all of the of the selector options? How would I know to use .dash-spreadsheet or .Select-menu-outer? How do we know these options exist?

1 Like