3

I am working on displaying a report using a tree table component from ant design.

I would like to make the bottom border of the collapsed parent or of the last expanded child in order to split the report into it's sections.

Current Situation Vs. Desired Effect enter image description here

Ideally I need a way to set the css class name through an attribute in the table data source.

Mohamad El Baba
  • 145
  • 2
  • 7

2 Answers2

4

All border attributes will not work at the level. They must be on the level. So, just giving a class name that modifies the border to a row won't work.

A workaround would be to set a class name using the Antd "rowClassName" prop (this can be set to a function that dynamically returns the class names).

Then, assign the following classes:

.highlight-bottom-border > td {
  border-bottom: solid 1px black !important
}

.highlight-top-border > td {
  border-top: solid 2px black !important;
  border-bottom: solid 2px #6d9eff !important
}

By doing so, the level is modified resulting in a more defined border.

Mohamad El Baba
  • 145
  • 2
  • 7
0

you can customize the className in JSX tags and add css property You can find the target className in the inspection

.customizeClassName { :global { .targetAntdClassName { border: none } } }

Tommy Tang
  • 62
  • 3