# dash\_table.DataTable styling examples **URL:** \ **Category:** Dash Python\ **Created:** [November 13, 2018, 2:19pm UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594 "2018-11-13T14:19:00Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![tks](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tks](https://community.plotly.com/u/tks)\ **Post date:** [November 13, 2018, 2:19pm UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/1 "2018-11-13T14:19:00Z")
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](https://react-table.js.org/#/story/default-sorting) or [DataTables example - Bootstrap 4](https://datatables.net/examples/styling/bootstrap4.html))? Is it possible to change the sorting look/behaviour to prompt sorting by clicking anywhere on the column header? ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [November 13, 2018, 7:32pm UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/2 "2018-11-13T19:32:47Z")
Did you see the styling chapter? [https://dash.plot.ly/datatable/style](https://dash.plot.ly/datatable/style) It’s linked from the main documentation page: [https://dash.plot.ly/datatable/](https://dash.plot.ly/datatable/) ---
**Author:** ![tks](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tks](https://community.plotly.com/u/tks)\ **Post date:** [November 13, 2018, 8:07pm UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/3 "2018-11-13T20:07:32Z")
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. ---
**Author:** ![caiyij](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/caiyij/32/4462_2.png) [@caiyij](https://community.plotly.com/u/caiyij)\ **Post date:** [November 13, 2018, 8:40pm UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/4 "2018-11-13T20:40:25Z")
Hi tsk, did you see [https://dash.plot.ly/datatable/interactivity](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](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](https://dash.plot.ly/dash-core-components) have underlined the clickable titles. ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [November 13, 2018, 8:57pm UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/5 "2018-11-13T20:57:04Z")
> [@caiyij](#): > > that maybe underlining the titles in [Dash DataTable | Dash for Python Documentation | Plotly](https://dash.plot.ly/datatable) would be helpful Great idea, thanks! Just made a PR here: [underline the chapter titles in dash datatable by chriddyp · Pull Request #270 · plotly/dash-docs · GitHub](https://github.com/plotly/dash-docs/pull/270) ---
**Author:** ![tks](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tks](https://community.plotly.com/u/tks)\ **Post date:** [November 14, 2018, 1:07am UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/6 "2018-11-14T01:07:24Z")
@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](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](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. ---
**Author:** ![Harsha](https://avatars.discourse-cdn.com/v4/letter/h/e274bd/32.png) [@Harsha](https://community.plotly.com/u/Harsha)\ **Post date:** [November 16, 2018, 1:05am UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/7 "2018-11-16T01:05:04Z")
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)! ---
**Author:** ![roden23](https://avatars.discourse-cdn.com/v4/letter/r/ed8c4c/32.png) [@roden23](https://community.plotly.com/u/roden23)\ **Post date:** [February 5, 2019, 8:10am UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/8 "2019-02-05T08:10:09Z")
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; } ---
**Author:** ![innominate](https://avatars.discourse-cdn.com/v4/letter/i/e274bd/32.png) [@innominate](https://community.plotly.com/u/innominate)\ **Post date:** [May 17, 2019, 4:32pm UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/9 "2019-05-17T16:32:43Z")
I was able to change the hover color with this: `css= [{'selector': 'tr:hover', 'rule': 'background-color: pink;'}]` ---
**Author:** ![akalkive](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@akalkive](https://community.plotly.com/u/akalkive)\ **Post date:** [November 11, 2019, 7:21pm UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/10 "2019-11-11T19:21:03Z")
I managed to change the sort icon alignment with CSS: ```auto 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 ---
**Author:** ![jodood](https://avatars.discourse-cdn.com/v4/letter/j/dec6dc/32.png) [@jodood](https://community.plotly.com/u/jodood)\ **Post date:** [June 18, 2021, 5:36pm UTC](https://community.plotly.com/t/dash-table-datatable-styling-examples/15594/11 "2021-06-18T17:36:40Z")
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?