[FIXED] How to give different background colors dynamically to columns of a react-data-table

Issue

I want to give different background colors dynamically to rows of the react-data table,but can't find How to do that,

I want this type of design, href="https://i.stack.imgur.com/DXl69.png" rel="nofollow noreferrer">

My table component is,

import {
  Flex,
  useColorModeValue,
  Button,
  ButtonGroup,
  Input,
  VStack,
  HStack,
  Stack,
  Image,
  Text,
} from "@chakra-ui/react";
import React, { useMemo } from "react";
import {
  useGlobalFilter,
  usePagination,
  useSortBy,
  useTable,
} from "react-table";
import Card from "components/card/Card";
import DataTable from 'react-data-table-component';

export default function ColumnsTable(props) {
  const columns = [
    {
      name: (<Text fontSize={'15px'}>Id</Text>),
      selector: row =>(<Text fontSize={'15px'}>{row.id}</Text>) ,
      sortable: true,
    },
    {
      name: (<Text fontSize={'15px'}>Name</Text>),
      selector: row =>(<Text fontSize={'15px'}>{row.name}</Text>) ,
      sortable: true,
    },
    {
      name: (<Text fontSize={'15px'}>Current Position</Text>),
      selector: row =>(<Text fontSize={'15px'}>{row.position}</Text>) ,
      sortable: true,
    },
    {
      name: (<Text fontSize={'15px'}>Birthday Date</Text>),
      selector: row =>(<Text fontSize={'15px'}>{row.birthDay}</Text>) ,
      sortable: true,
    },
  ];

  const data = [
    {
      id: 1,
      name: 'Annette Black',
      position: '   Industrial Designer',
      birthDay:'12-06-1998'
    },
    {
      id: 2,
      name: 'Bessie Cooper',
      position: 'Graphic Designer',
      birthDay:'12-06-1998'
    },
    {
      id: 2,
      name: '   Leslie Alexander',
      position: '   Industrial Designer',
      birthDay:'12-06-1998'
    },
    {
      id: 3,
      name: 'Leslie Alexander',
      position: 'Graphic Designer',
      birthDay:'12-06-1998'
    },
    {
      id: 4,
      name: 'Leslie Alexander',
      position: '   Product Manager',
      birthDay:'12-06-1998'
    },
  ]

  return (
    <Stack w={'74vw'} bg='white' mt={5} py={5}>
      <DataTable
      title='Upcoming Birthday'
        columns={columns}
        data={data}
      />
    </Stack>
  );
}

Thanks in advance

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat provident ducimus voluptate, recusandae vero, distinctio eius, debitis numquam corrupti libero modi quaerat minima. At voluptatem, saepe accusamus velit numquam quis!

Solution

This is a heavy workaround, but it doesn't seem that the component allows to elegantly configure the way you want...

  const randomRGBAColor = () => {
    return `rgba(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)}, 0.3)`
  }

  useEffect(() => {
    document.querySelector(".rdt_TableHeadRow").style.backgroundColor = randomRGBAColor();
    [...document.querySelector(".rdt_TableBody").children].forEach(row => row.style.backgroundColor = randomRGBAColor());
  }, [])

Answered By - Paulo Fernando
Answer Checked By - - Mildred Charles (ReactFix Admin)