import "./styles.css"; import { FaChevronRight, FaChevronDown } from "react-icons/fa"; import React from "react"; import { useTable, useExpanded, useSortBy, useGlobalFilter } from "react-table"; import { Filter } from "./Filter"; const Table = ({ columns: userColumns, data }) => { const { getTableProps, getTableBodyProps, headerGroups, rows, setGlobalFilter, prepareRow, state: { expanded, globalFilter } } = useTable( { columns: userColumns, data }, useGlobalFilter, // Filter input feature useSortBy, // Add sorting feature useExpanded // Plugin neccessary for our tree grid component ); return (

{/* Add filter field */} {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( // Add feature to toggle sorting by clicking the respective table heads ))} ))} {rows.map((row, i) => { prepareRow(row); return ( {row.cells.map((cell) => { return ( ); })} ); })}

{column.render("Header")}
{cell.render("Cell")}

); }; // Function to create table info const range = (len) => { const arr = []; for (let i = 0; i < len; i++) { arr.push(i); } return arr; }; const newData = () => { // food array const food = [ "pizza", "hamburger", "steak", "Risotto", "Salad", "Turkey", "Gravy", "Corn", "Hotdog", "Chicken" ]; // Spices array const spice = [ "Paprika", "Cinnamon", "Curry", "Cumin", "Thyme", "Chili", "Cloves", "Basil", "Garlic", "Oregano" ]; // Random number between 1-10 var randNum = Math.floor(Math.random() * 10) + 1; // return information return { food: food[randNum], spice: spice[randNum], weight: `${Math.floor(Math.random() * 30)}kg` }; }; // Define table and sub rows function makeData(...lens) { const makeDataLevel = (depth = 0) => { const len = lens[depth]; return range(len).map((d) => { return { ...newData(), subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined }; }); }; return makeDataLevel(); } export default function App() { const columns = React.useMemo( () => [ { // Build expandable columns id: "expander", // NB: ID required Cell: ({ row }) => row.canExpand ? ( {/* drop down icons */} {row.isExpanded ? : } ) : null }, // names of column headers { Header: "Food", columns: [ { Header: "Food Name", accessor: "food" }, { Header: "Spices", accessor: "spice" } ] }, { Header: "Info", columns: [ { Header: "Weight(kg)", accessor: "weight" } ] } ], [] ); const data = React.useMemo(() => makeData(5, 5, 5), []); return (

); }