Как применить отдельную строку поиска столбца в Datatables, используя Reactjs для приведенного ниже кода

Question

import React from "react";
import "./App.css";
import DataTable, { createTheme } from "react-data-table-component";

const data = [
  { id: 1, title: "onan the Barbarian", year: "1982" },
  { id: 2, title: "Zonan the Barbarian", year: "2982" },
  { id: 3, title: "Donan the Barbarian", year: "5982" },
  { id: 4, title: "Conan the Barbarian", year: "15982" },
  { id: 5, title: "Bonan the Barbarian", year: "8982" },
  { id: 6, title: "Aonan the Barbarian", year: "9982" },
  { id: 7, title: "onan the Barbarian", year: "1982" },
  { id: 8, title: "Zonan the Barbarian", year: "2982" },
  { id: 9, title: "Donan the Barbarian", year: "5982" },
  { id: 10, title: "Conan the Barbarian", year: "15982" },
  { id: 11, title: "Bonan the Barbarian", year: "8982" },
  { id: 12, title: "Aonan the Barbarian", year: "9982" },
];

const columns = [
  {
    name: "Name",
    selector: "title",
    sortable: true,
    middle: true,
  },
  {
    name: "Year",
    selector: "year",
    sortable: true,
    //right: true,
    middle: true,
  },
];

const customStyles = {
  rows: {
    style: {
      minHeight: "72px", // override the row height
    },
  },
  headCells: {
    style: {
      paddingLeft: "8px", // override the cell padding for head cells
      paddingRight: "8px",
    },
  },
  cells: {
    style: {
      paddingLeft: "8px", // override the cell padding for data cells
      paddingRight: "8px",
    },
  },
};

function App() {
  return (
    <div className="App">
      <DataTable
        title="Movies"
        columns={columns}
        data={data}
        striped="True"
        highlightOnHover="True"
        style={customStyles}
        pagination="true"
      />
    </div>
  );
}

export default App;

Как я могу добавить отдельную строку поиска для отдельных столбцов в таблицах данных, используя reactjs. Пожалуйста, помогите мне преодолеть эту проблему. Я использую компонент-таблицы-данных-реакции, который будет реагировать. js веб-сайт. Если вы используете какие-либо зависимости, пожалуйста, укажите перед кодом. Они мне пригодятся.

Answer 1

, вы можете добавить его в подзаголовок, следуйте официальному примеру do c: https://jbetancur.github.io/react-data-table-component/?path= / story / filtering - example-1