Styling guide

[paddymul]

Use case

Is there any explanation of all the ways to style a table, and common practices.

Proposed solution

I would like to see advice for how to set width and height specifically. inline style seems to work, css classnames don't. Also the data grid doesn't respect it's parent's width width:100% . What are the best practices?

[VerioN1]

do you have an open repo that you had to style the grid?
I don't know how to style it with only style

[paustint]

I only made very minor customizations, so not a great resource for anything large-scale - this information is extremely basic and far from a "style guide".

<DataGrid
  ...
  className="rdg-light fill-grid"
  ...

Then for columns I have used cellClass and summaryCellClass etc.. to control some additional styles.

Aside from that I was able to use formatter to control what I needed for my cell styles. Note that for any cells that need to have multi-line values, you need to make sure to set the line height to 1 for your formatter component.

These are the only global overrides I ended up making:
scss

.rdg {
  &.fill-grid {
    block-size: 100%;
  }

  .select-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    > input {
      margin: 0;
    }
  }

  .rdg-checkbox {
    &:checked {
      outline: 'none !important';
    }
  }
}

All this is probably of little help - but hopefully helps someone.
I am using a ton of data table components spread out throughout the repo, but here is my data table wrapper component if you wanted to check it out
https://github.com/jetstreamapp/jetstream/blob/main/libs/ui/src/lib/data-table/DataTable.tsx

[rohit-squirrel]

I am also facing the same. Css className does not work

[stuartambient]

I am also facing the same. Css className does not work

Try this maybe ? Not sure if it is directly related but it helped me with getting the grid itself to work.