Improving Dash DataTables: Simple CSS Tweaks | dash-resources.com

Hi!

I use a different, CSS styled variation of the datatable for work.
The idea was to increase the readability and UI/UX of this component by adding:

  • a dash bootstrap style
  • a better styled header
  • a hover effect on rows
  • a row selection emphasis

Here is the article:

Nothing revolutionary, but I wanted to share the steps that I took and the CSS code it requires to improve it. :slight_smile:
It may also be inspirational for those that don’t know what we can with CSS to change a component’s appearance.

Let me know what you think!

— Fran

5 Likes

Informative article. Thank you @spriteware . Do you use the Dash DataTable more than Dash AG Grid?

I see many community members migrating to Dash AG Grid because of the extra features it has and more customization capabilities.

That said, I used the DataTable for a long time. I wish I had your article back then :slight_smile:

@adamschroeder I don’t use it more often (it really depends on the use case), I just wanted to share this just in case the appearance of the datatable is a blocking reason for somebody to use it.

By the way, do you know if there are any updates planned for DataTable?

No updates planned for the DataTable. The focus, moving forward, will be on Dash AG Grid.

2 Likes

I appreciate you @spriteware creating the Dash Data tables, it might help to build admin dashboards for everyone.