How to write the custom styles for DataTable

41 views Asked by At

How to write the styles for DataTable Heading and pagination arrow icons in react-data-table-component npm, <DataTable columns={columns}

Pagination

data={conditionData?.existingPhysician?.slice().reverse()}

onChangePage={(e) =\\\> { setPage((e - 1) \\\* rowsPerPage); }}

onChangeRowsPerPage={(e) =\\\> { setRowsPerPage(e); }}

paginationRowsPerPageOptions={\\\[10, 15, 20, 25, 30\\\]} \\\>

import DataTable from 'react-data-table-component';

// This is my DataTable Component and columns is 

  const columns = [
    {
      name: '#',
      selector: (row, index) => {
        return index + 1 + page;
      },
      sortable: true,
      width: window.innerWidth > 1600 ? '60px' : '6vw',
      style: {
        fontSize: '1vw',
        padding: '1vw',
      },
    },
    {
      name: 'Physician Name',
      selector: (row) => row.physicianName,
      sortable: true,
      width: window.innerWidth > 1600 ? '200px' : '20vw',
      style: {
        fontSize: '1vw',
        padding: '1vw',
      },
    },
    {
      name: 'Consulting Since',
      selector: (row) =>
        row.created_at && moment(row.consultingSince).format('MMM Do YYYY '),
      sortable: true,
      width: window.innerWidth > 1600 ? '200px' : '20vw',
      style: {
        fontSize: '1vw',
        padding: '1vw',
      },
    },
    {
      name: 'Consulting Until',
      selector: (row) =>
        row.endDate && moment(row.endDate).format('MMM Do YYYY '),
      sortable: true,
      width: window.innerWidth > 1600 ? '200px' : '20vw',
      style: {
        fontSize: '1vw',
        padding: '1vw',
      },
    },
  ];
0

There are 0 answers