search

imballinst / react-bs-datatable

Bootstrap datatable without jQuery. Features include: filter, sort, pagination, checkbox, and control customization.
https://imballinst.github.io/react-bs-datatable
MIT License
59 stars 20 forks source link

how to apply styles to particular columns #71

Closed masnoonmulla closed 3 years ago

masnoonmulla commented 3 years ago

Hi, how to apply dynamic styles to columns...

imballinst commented 3 years ago

Do you want to make the cell's style dynamic, or is it the content's style itself?

masnoonmulla commented 3 years ago

Example:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany

from above eg on first td tag there multiple style ,for second td only one style,and for last td no styles.. Capture

imballinst commented 3 years ago

@masnoonmulla are the styles static (as in, the columns' style in all rows will be that way)? If yes, then probably we can take advantage of CSS nth-child(n) (example here: https://codesandbox.io/s/issue-71-example-kdtks). Let me know if this suits your need!

But, probably that's a bit "hacky". Let me see if I can work on something in the next week to add a prop, something-something like, cellProps or something.

<Datatable
  cellProps={{
    // Pass string for `className`, or pass `CSSProperties` for `style`.
    username: {
      className: 'td-username',
      style: { fontWeight: 700 }
    },
    // The other way to do it is to pass a function to dynamically "adapt" based on the cell's value.
    name: {
      className: value => value === 'Bob' ? 'td-username' : undefined,
      style: value => value === 'Bob' ? { fontWeight: 700 } : undefined
    },
  }}
/>

Please let me know what you think!

masnoonmulla commented 3 years ago

@Imballinst Yes, codesandbox.io example work for me. and please let me know after above example implemented. we faced another issue. saving state of the table like pagination, search etc.

imballinst commented 3 years ago

@Imballinst Yes, codesandbox.io example work for me. and please let me know after above example implemented. we faced another issue. saving state of the table like pagination, search etc.

ok! I will update this issue when I have worked on that. With regards to saving the table state, I think you can use query parameters and make the table's state controlled -- so we can "re-hydrate" the state from query parameters, in a way.

masnoonmulla commented 3 years ago

Please let me know the example of table state on Codesandbox.io !

imballinst commented 3 years ago

Hi @masnoonmulla -- I just pushed an alpha version 2.1.2-alpha2 for cellProps -- you can see its usage here: https://codesandbox.io/s/212-alpha2-cell-styles-and-classnames-by-string-object-and-functions-lm9ze.

As for the controlled table state, could you try something similar to https://imballinst.github.io/react-bs-datatable/?path=/story/advanced-guides--asynchronous-table? Technically, we are "lifting" the states from the table to outside of it. Then, you can use local storage or query parameters to "store" and "re-hydrate" the state.

masnoonmulla commented 3 years ago

Hi @masnoonmulla -- I just pushed an alpha version 2.1.2-alpha2 for cellProps -- you can see its usage here: https://codesandbox.io/s/212-alpha2-cell-styles-and-classnames-by-string-object-and-functions-lm9ze.

As for the controlled table state, could you try something similar to https://imballinst.github.io/react-bs-datatable/?path=/story/advanced-guides--asynchronous-table? Technically, we are "lifting" the states from the table to outside of it. Then, you can use local storage or query parameters to "store" and "re-hydrate" the state.

Thanks for your support