如何實現在 Material-UI 的 Table 前新增搜尋功能？How To Implement Material-UI Table With SearchBar?

最近一直研究 Material-UI，才發現 table 沒有內建的搜尋功能，於是這篇文章出現ㄌ，紀錄一下寫法，避免自己忘記（如果也能幫上你就更好了!）

google 了一陣子，有很多相關的套件，最後發現這個最簡單最方便界面最整潔文檔也乾淨（？

將將～～～～～

按照步驟

1. install

npm install @material-ui/core
npm install material-ui-search-bar

2. import

import SearchBar from "material-ui-search-bar";

3. React

import

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import SearchBar from "material-ui-search-bar";

css

const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },
});

table data

const originalRows = [
  { name: "Pizza", calories: 200, fat: 6.0, carbs: 24, protein: 4.0 },
  { name: "Hot Dog", calories: 300, fat: 6.0, carbs: 24, protein: 4.0 },
  { name: "Burger", calories: 400, fat: 6.0, carbs: 24, protein: 4.0 },
  { name: "Hamburger", calories: 500, fat: 6.0, carbs: 24, protein: 4.0 },
  { name: "Fries", calories: 600, fat: 6.0, carbs: 24, protein: 4.0 },
  { name: "Ice Cream", calories: 700, fat: 6.0, carbs: 24, protein: 4.0 },
];

component

export default function DataTable(){
const [rows, setRows] = useState(originalRows);
const [searched, setSearched] = useState("");
const classes = useStyles();
const requestSearch = (searchedVal) => {
    const filteredRows = originalRows.filter((row) => {
      return  row.name.toLowerCase().includes(searchedVal.toLowerCase());
    });
    setRows(filteredRows);
    // if (filteredRows.length !== 0) {
    //   setRows(filteredRows);
    // } else {
    //   console.log(filteredRows.length);
    // }
  };
const cancelSearch = () => {
    setSearched("");
    requestSearch(searched);
  };
  return (
    <>
      <Paper>
        <SearchBar
          value={searched}
          onChange={(searchVal) => requestSearch(searchVal)}
          onCancelSearch={() => cancelSearch()}
        />
        <TableContainer>
          <Table className={classes.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Dessert (100g serving)</TableCell>
                <TableCell align="right">Calories</TableCell>
                <TableCell align="right">Fat&nbsp;(g)</TableCell>
                <TableCell align="right">Carbs&nbsp;(g)</TableCell>
                <TableCell align="right">Protein&nbsp;(g)</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {rows.map((row) => (
                <TableRow key={row.name}>
                  <TableCell component="th" scope="row">
                    {row.name}
                  </TableCell>
                  <TableCell align="right">{row.calories}</TableCell>
                  <TableCell align="right">{row.fat}</TableCell>
                  <TableCell align="right">{row.carbs}</TableCell>
                  <TableCell align="right">{row.protein}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Paper>
    </>
  );
}

then ...

其中比較卡的是，在我引用的專案中搜尋結果為0的話整個 component 都會消失 OUO / ，後來加上判斷就 ok ㄌ~~~

完成！