score:2

Accepted answer
import "./styles.css";
import DataTable from "react-data-table-component";
import styled from "styled-components";

const StyledCell = styled.div`
  &.low {
    background: green !important;
  }
  &.medium {
    background: orange;
  }
  &.high {
    background: red !important;
  }
`;

export default function App() {
  let items = [
    {
      Country: "Canada",
      AdditionalNewCases: 500
    },
    {
      Country: "England",
      AdditionalNewCases: 5000
    },
    {
      Country: "USA",
      AdditionalNewCases: 500000
    }
  ];
  function getCssClass(value) {
    if (value > 5000) return "high";
    else if (value > 500) return "medium";
    return "low";
  }
  return (
    <DataTable
      title="Covid-19 Stats"
      defaultSortAsc="false"
      responsive
      defaultSortAsc={false}
      striped
      highlightOnHover
      data={items}
      columns={[
        {
          name: "number",
          selector: (row, index) => index + 1,
          disableSortBy: true
        },
        {
          name: "Country",
          selector: "Country",
          sortable: true
        },
        {
          name: "New Cases",
          selector: "AdditionalNewCases",
          sortable: true,
          cell: (row) => (
            <StyledCell className={getCssClass(row.AdditionalNewCases)}>
              {row.AdditionalNewCases}
            </StyledCell>
          )
        }
      ]}
    />
  );
}

Related Query

More Query from same tag