Conditionally style a header text

[walebant]

const classes = { theadCol: css .table-datatable__root & { font-weight: bold; }

}; Using the classess prop, the code above applies to all column head.

const header = [ { title: 'Dressing', prop: 'dressing', sortable: true, filterable: true }, { title: 'Name', prop: 'name', sortable: true, filterable: true } ] From the header above, there should be a way to apply a style to a particular header e.g the one with title: 'Name'.

[walebant]

This also applies to the cell prop. There should be like a condition to render the returned react component to the table body, just in case i don't want the cell to get rendered to all the elements in the body.

My uses case here is: I have a table with a list of items with name and amount props. Then a total row at the bottom which sums all the amount. For each item, i want to render a button next to it, except the total row.

[imballinst]

Sorry! I was a bit busy past 2 weeks. I can work on it by this weekend, even if you don't need it anymore (just so future users can fulfill your use-case). This seems like a valid use-case for me, too.

[walebant]

Hi @Imballinst, thats ok. I found a way to satisfy my use-case using the cell callback function See below:

{ title: 'View', prop: 'action', cell: row => row.name !== 'TOTAL' && ( <Button className="btn-sm" color="primary" onClick={() => handleViewPayslip(row)}> View Payslip </Button> ) },

[imballinst]

oh, awesome! Yeah, that's a great way of utilizing the cell field. I think that means you did the same for the header text?

[walebant]

I tried that with the header. Didn't work. Perhaps you could look more into it. Great work by the way 👍

[imballinst]

Got it. Thanks for the pointers! I'll take further look on it -- and will get back to you when I find the fix/way out.

[imballinst]

@wale-bant apparently I made cell only for the table body column. So, I made a new field headerCell -- demo here https://codesandbox.io/s/206-alpha1-headercell-gtwyq

Snippet:

{
  title: "Score",
  prop: "score",
  sortable: true,
  headerCell: (icon, sortedProp) => {
    // icon is the actual icon.
    // sortedProp is the currently sortedProp -- in case we want to access it.
    const isActive = sortedProp.prop === "score";
    const order = sortedProp.isAscending ? "asc" : "desc";

    return (
      <>
        {`Name ${isActive ? `(Active ${order})` : "(Inactive)"}`}
        <span className="pull-right">{icon}</span>
      </>
    );
  }
}

If you want, you can also use your own icon depending on isActive and order.

This is published in v2.0.6-alpha1. If this fits your needs, I will go ahead and publish this as v2.0.6.

[walebant]

Superb!. This will do 👍

[imballinst]

@wale-bant This is released in v2.0.6 -- again, demo can be seen in either https://codesandbox.io/s/206-headercell-rowcn (updated the deps to v2.0.6 instead of v2.0.6-alpha1), or the Storybook (https://imballinst.github.io/react-bs-datatable/?path=/story/getting-started--custom-cell-representation).

Let me know if you have any questions!