单击标题时突出显示表格列

问题描述

我需要能够实现一项功能，当您单击每个单独的列标题时，它会突出显示所选列。例如，用户单击标题 id 单元格，它将突出显示 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;

ReactTable.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,});
    
  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',};
};

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',};
      },},{
      id: 'name',Header: () => {
        return <TableHeader title="name" />;
      },accessor: 'name',style: () => {
        return {
          flexBasis: '125px',{
      id: 'age',Header: () => {
        return (
          <TableHeader
            title="Age"
            field="age"
          />
        );
      },];
};

export default columns;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）