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

Dash Python
,
1

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
2

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:

3

@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?

4

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

2 Likes
5

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