如何编写 DataTable 的自定义样式

How to write the custom styles for DataTable

提问人:Nagabalan.k 提问时间:9/20/2023 最后编辑:marc_sNagabalan.k 更新时间:10/29/2023 访问量:27

问:

如何在 react-data-table-component npm 中编写 DataTable 标题和分页箭头图标的样式,<DataTable columns={columns}

分页

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',
      },
    },
  ];
javascript css reactjs 样式组件 scss-lint

评论


答: 暂无答案