使用 Javascript ES6 过滤 Table

Question

实际上我需要一些帮助我正在使用 Material UI & React 并且需要有两个实现

我需要一个过滤器来过滤掉所有存在的行（我需要为每一列添加过滤器）图片附在下面。
我需要一个在行中添加相同内容的按钮（附图片）

代码如下

import React from 'react';
import {
  Typography,
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableContainer,
  TableBody,
  Button
} from '@material-ui/core';


const Table = props => {
  const { columnHeaders, data } = props;
  return (
    <>
      <TableContainer >
        <Table>
          <TableHead>
            <TableRow >
              {columnHeaders.map((k, index) => (
                <TableCell
                  key={k}
                  className={'product-line-tablehead '}
                  style={{
                    width: `${100 / columnHeaders.length}%`
                  }}
                >
                  {k.title}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((k, index) => (
              <TableRow key={index}>
                <TableCell>
                  <Typography variant='body1'
                  >
                    {k.Product}
                  </Typography>
                </TableCell>
                <TableCell>
                  <Typography
                  >
                    {k.Code}
                  </Typography>
                </TableCell>
                <TableCell>
                  <Typography
                  >
                    {k.Branding}
                  </Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography
                  >
                    <img
                      src={DeleteIcon}
                    />
                    <Button                          
                    >
                      Clear
                    </Button>
                  </Typography>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
};

export default Table;

我在哪里获取值，父组件是这样的

 import React, { useEffect } from 'react';
    import { Grid, Typography } from '@material-ui/core';
    import Table from './Table';
    
    const mocklabels = [
      {
        title: 'Teacher',
        link: ''          },
      {
        title: 'Student',
        link: ''          }
    ];
    
    const columnHeaders = [
      {
        title: 'Name'
      },
      {
        title: 'Class'
      },
      {
        title: 'Gender'
      },
      {
        title: ''
      }
    ];
    const data = [
      {
        Product: 'Lorum Ipsum Dolar',
        Code: 'Lorum Ipsum Dolar',
        Branding: 'Lorum Ipsum Dolar'
      },
      {
        Product: 'Lorum Ipsum Dolar',
        Code: 'Lorum Ipsum Dolar',
        Branding: 'Lorum Ipsum Dolar'
      }
    ];
    
        
      );
    };

;

图片 1

图 2

图 3

图 4

Answer 1

开始时，只要你想 'filter' React App 中基于条件的项目数组。请确保保存数据的原始副本。这一点非常重要，因为删除过滤器后，您可能想要返回显示原始数据。

const [mainData, setMainData] = useState(data); //orignial array
const [appData, setAppData] = useState(data.slice()); //copied array that is rendered

话虽如此，您的用例要求您在 table header 上切换过滤选项，并且根据应用过滤器的列，您需要过滤项目属性.

您似乎使用了一个列数组来呈现 table header，所以我只是添加了一个额外的属性 of 'key' 每个 object。此属性的值应与呈现为 table 行的 object 上的属性相匹配。

const columnHeaders = [
    {
        title: "Product Name",
        key: "Product", //should match your data's object key
        value: ""
    },
    {
        title: "Product Name",
        key: "Code", //should match your data's object key
        value: ""
    },
    {
        title: "Product Name",
        key: "Branding", //should match your data's object key
        value: ""
    },
    {
        title: ""
    }
];

Table headers 现在应该像这样呈现：

<TableRow>
  {props.tableHeaders.map((k, index) => (
    <TableCell
      key={index}
      className={"product-line-tablehead "}
      style={{
        width: `${100 / props.tableHeaders.length}%`
      }}
    >
      {k.title ? (
        <>
          <h3>{k.title}</h3>
          {props.isSearching && (
            <Input
              value={k.value}
              onChange={(e) => {
                props.handleHeaderChange(e, index, k.key);
              }}
            />
          )}
        </>
      ) : props.isSearching ? (
        <CancelIcon
          onClick={() => {
            props.setSearching(false);
          }}
        />
      ) : (
        <SearchIcon
          onClick={() => {
            props.setSearching(true);
          }}
        />
      )}
    </TableCell>
  ))}
</TableRow>

接下来，onChange 处理程序 handleHeaderChange(e, index, k.key); 负责触发对 table 记录的过滤。执行应该如下：

const handleHeaderChange = (e, index, prop) => {
    
    tableHeaders[index].value = e.target.value;
    
    setTableHeaders(tableHeaders);
    
    let _newAppData = mainData.filter((f) => {
      let _condition = tableHeaders
        .filter((h) => h.value)
        .map((a) => {
          let _obj = f[a.key];
          return (
            _obj !== undefined &&
            _obj.toString().toLowerCase().indexOf(a.value.toLowerCase()) >= 0
          );
        });
      return _condition.indexOf(false) >= 0 ? false : true;
    });

    setAppData(_newAppData);
};

所以在这里，我们只是通过迭代 header 输入值并关联到相应的 object 属性值来过滤原始数据。 f 是数据数组中的每一项，a 是 header 数组中具有 key 的每一项（即属性的名称 f) 和 value 即该列的过滤器输入。

_condition 是一个布尔值数组，_condition.indexOf(false) >= 0 ? false : true; 只是表示一个 AND 条件。

完整代码可以在这里找到：https://codesandbox.io/s/trusting-sound-5lo12z?file=/src/App.js:564-667

使用 Javascript ES6 过滤 Table

Filter Table using Javascript ES6

javascript

reactjs

material-ui

react-redux