0

我需要能够实现一个功能，当您单击每个单独的列标题时，它会突出显示所选列。例如，用户单击标题 id 单元格它将突出显示 id 列，并且突出显示将从上一个中删除选择，每次单击新的标题单元格时。仅在此处显示我认为需要的主要文件。任何帮助深表感谢。

我的表看起来像这样的结构：

编号 | 姓名 | 年龄

  1. | 鲍勃。| 18
  2. | 约翰 | 25

PeopleDataTable.js：

import React, { useMemo } from 'react';
import { useStoreState, useStoreActions } from 'easy-peasy';
import DataTable from './ReactTable';
import { useHistory } from 'react-router-dom';
import columns from './Cols';

const PeopleDataTable = () => {
  const data = [];
  const cols = useMemo(() => columns(), []);
    
  return (
    <>
        <DataTable columns={cols} data={} />
    </>
  );
};

export default PeopleDataTable;

反应表.js

import React, { useState } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { useTable } from 'react-table';
import DataTableLoader from './DataTableLoader';

const DatatableWrapperLoading = styled.div`
  ${(props) => (props.isLoading ? props.theme.DataTableTheme.dataTableWrapperLoadingStyles : ``)}
`;

const DatatableWrapper = styled.div`
  ${({ theme }) => theme.DataTableTheme.dataTableWrapperStyles}
`;

const DivTable = styled.div`
  ${({ theme }) => theme.DataTableTheme.dataTableStyles}
`;

const DivThead = styled.div`
  ${({ theme }) => theme.DataTableTheme.dataTableHeaderStyles}
`;

const DivTableRow = styled.div`
  ${({ theme }) => theme.DataTableTheme.dataTableRowStyles}
`;

const DivTableBodyRow = styled(DivTableRow)`
  ${({ theme }) => theme.DataTableTheme.dataTableBodyRowStyles}
`;

const DivTableCol = styled.div`
  ${({ theme }) => theme.DataTableTheme.dataTableColStyles}
`;

const DivTableBody = styled.div`
  ${({ theme }) => theme.DataTableTheme.dataTableBodyStyles}
`;

const OverFlowContainer = styled.div`
  ${({ theme }) => theme.DataTableTheme.dataTableOverflowStyles}
`;

const DataTable = ({ columns, data, performOverflow, onRowClick, isLoading }) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data,
  });
    
  return (
    <>
      {data && data.length > 0 ? (
        <DatatableWrapperLoading isLoading={isLoading}>
          <DataTableLoader isLoading={isLoading} />
          <OverFlowContainer performOverflow={performOverflow}>
            <DatatableWrapper>
              <DivTable {...getTableProps()}>
                <DivThead>
                  {headerGroups.map((headerGroup) => (
                    <DivTableRow {...headerGroup.getHeaderGroupProps()}>
                      {headerGroup.headers.map((column) => (
                        <DivTableCol
                          style={column.style ? column.style('colWithoutSort') : null}
                          {...column.getHeaderProps()}
                          className={`header-${column.id}`}
                        >
                          {column.render('Header')}
                        </DivTableCol>
                      ))}
                    </DivTableRow>
                  ))}
                </DivThead>

                <DivTableBody {...getTableBodyProps()}>
                  {rows.map((row) => {
                    prepareRow(row);
                    return (
                      <DivTableBodyRow {...row.getRowProps()} onClick={() => {}}>
                        {row.cells.map((cell, c) => {
                          return (
                            <DivTableCol
                              className={`cell-${cell.column.id}`}
                              {...cell.getCellProps()}
                            >
                              {cell.render('Cell')}
                            </DivTableCol>
                          );
                        })}
                      </DivTableBodyRow>
                    );
                  })}
                </DivTableBody>
              </DivTable>
            </DatatableWrapper>
          </OverFlowContainer>
        </DatatableWrapperLoading>
      ) : null}
    </>
  );
};

DataTable.defaultProps = {
  columns: null,
  data: null,
  performOverflow: false,
  onRowClick: null,
  isLoading: null,
};
DataTable.propTypes = {
  columns: PropTypes.array,
  data: PropTypes.array,
  performOverflow: PropTypes.bool,
  onRowClick: PropTypes.func,
  isLoading: PropTypes.bool,
};

export default DataTable;

Cols.js：

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';

const colWithoutSort = (header) => {
  return header === 'colWithoutSort'
    ? {
        flexBasis: '67px',
        flexGrow: '0',
        justifyContent: 'center',
        pointerEvents: 'none',
      }
    : {
        flexBasis: '67px',
        flexGrow: '0',
        justifyContent: 'center',
      };
};

const Div = styled.div`
  font-weight: bold;
`;

const IconContainer = styled.div`
  text-align: center;
  margin: auto;
`;

const Text = styled.span`
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
`;

const ProgressWrapper = styled.div`
  display: block;
`;

const Container = styled.div`
  display: flex;
`;

const columns = (history) => {
  return [
    {
      id: 'id',
      Header: () => {
        return (
          <TableHeader
            title="id"
            field="id"
          />
        );
      },
      accessor: (item) => {
        return <>{item.id} </>;
      },

      style: () => {
        return {
          flexBasis: '97px',
          flexGrow: '0',
        };
      },
    },
    {
      id: 'name',
      Header: () => {
        return <TableHeader title="name" />;
      },
      accessor: 'name',
      style: () => {
        return {
          flexBasis: '125px',
          flexGrow: '0',
          justifyContent: 'center',
        };
      },
    },
    {
      id: 'age',
      Header: () => {
        return (
          <TableHeader
            title="Age"
            field="age"
          />
        );
      },       
  ];
};

export default columns;
4

0 回答 0