react table via https://blog.logrocket.com/react-table-complete-guide/
//table.js
import React, { useState } from "react"; // Import useState
import { useFilters, useTable } from "react-table";
export default function Table({ columns, data }) {
// Create a state
const [filterInput, setFilterInput] = useState("");
// Update the state when input changes and apply the filter to the "name" column
const handleFilterChange = (e) => {
const value = e.target.value || undefined;
setFilter("show.name", value); // Set filter for the "show.name" column
setFilterInput(value);
};
// Use the useTable Hook to send the columns and data to build the table
const {
getTableProps, // table props from react-table
getTableBodyProps, // table body props from react-table
headerGroups, // headerGroups, if your table has groupings
rows, // rows for the table based on the data passed
prepareRow, // Prepare the row (this function needs to be called for each row before getting the row props)
setFilter,
} = useTable(
{
columns,
data,
},
useFilters // Enable the useFilters hook
);
/*
Render the UI for your table
- react-table doesn't have UI, it's headless. We just need to put the react-table props from the Hooks, and it will do its magic automatically
*/
return (
<div>
{/* Input field for filtering */}
<input
value={filterInput}
onChange={handleFilterChange}
placeholder={"Search name"}
/>
{/* Table rendering */}
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
</div>
);
}
//App.js
// App.js
import axios from "axios";
import React, { useMemo, useState, useEffect } from "react";
import Table from "./Table";
import "./App.css";
function App() {
/*
- Columns is a simple array right now, but it will contain some logic later on. It is recommended by react-table to memoize the columns data
- Here in this example, we have grouped our columns into two headers. react-table is flexible enough to create grouped table headers
*/
const columns = useMemo(
() => [
{
// first group - TV Show
Header: "TV Show",
// First group columns
columns: [
{
Header: "Name",
accessor: "show.name",
},
{
Header: "Type",
accessor: "show.type",
},
],
},
{
// Second group - Details
Header: "Details",
// Second group columns
columns: [
{
Header: "Language",
accessor: "show.language",
},
{
Header: "Genre(s)",
accessor: "show.genres",
},
{
Header: "Runtime",
accessor: "show.runtime",
},
{
Header: "Status",
accessor: "show.status",
},
],
},
],
[]
);
// data state to store the TV Maze API data. Its initial value is an empty array
const [data, setData] = useState([]);
// Using useEffect to call the API once mounted and set the data
useEffect(() => {
(async () => {
const result = await axios("https://api.tvmaze.com/search/shows?q=snow");
setData(result.data);
})();
}, []);
return (
<div className="App">
<Table columns={columns} data={data} />
</div>
);
}
export default App;
Comments
Post a Comment