import * as React from 'react'; import { CompactTable } from '@table-library/react-table-library/compact'; import { useTheme } from '@table-library/react-table-library/theme'; import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/material-ui'; import { Stack, TextField } from '@mui/material'; import { FaSearch } from 'react-icons/fa'; import { DocumentationSee } from '../../../documentation'; import { nodes } from '../../../data'; const key = 'Search'; const Component = () => { let data = { nodes }; const materialTheme = getTheme(DEFAULT_OPTIONS); const theme = useTheme(materialTheme); const [search, setSearch] = React.useState(''); const handleSearch = (event) => { setSearch(event.target.value); }; data = { nodes: data.nodes.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())), }; const COLUMNS = [ { label: 'Task', renderCell: (item) => item.name }, { label: 'Deadline', renderCell: (item) => item.deadline.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', }), }, { label: 'Type', renderCell: (item) => item.type }, { label: 'Complete', renderCell: (item) => item.isComplete.toString(), }, { label: 'Tasks', renderCell: (item) => item.nodes?.length }, ]; return ( <> <Stack spacing={10}> <TextField label="Search Task" value={search} icon={<FaSearch />} onChange={handleSearch} /> </Stack> <br /> <CompactTable columns={COLUMNS} data={data} theme={theme} /> <br /> <DocumentationSee anchor={'Features/' + key} /> </> ); }; const code = ` import * as React from 'react'; import { CompactTable } from '@table-library/react-table-library/compact'; import { useTheme } from '@table-library/react-table-library/theme'; import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/material-ui'; import { Stack, TextField } from '@mui/material'; import { FaSearch } from 'react-icons/fa'; import { DocumentationSee } from '../../../documentation'; import { nodes } from '../../../data'; const key = 'Search'; const Component = () => { let data = { nodes }; const materialTheme = getTheme(DEFAULT_OPTIONS); const theme = useTheme(materialTheme); const [search, setSearch] = React.useState(''); const handleSearch = (event) => { setSearch(event.target.value); }; data = { nodes: data.nodes.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())), }; const COLUMNS = [ { label: 'Task', renderCell: (item) => item.name }, { label: 'Deadline', renderCell: (item) => item.deadline.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', }), }, { label: 'Type', renderCell: (item) => item.type }, { label: 'Complete', renderCell: (item) => item.isComplete.toString(), }, { label: 'Tasks', renderCell: (item) => item.nodes?.length }, ]; return ( <> <Stack spacing={10}> <TextField label="Search Task" value={search} icon={<FaSearch />} onChange={handleSearch} /> </Stack> <br /> <CompactTable columns={COLUMNS} data={data} theme={theme} /> <br /> <DocumentationSee anchor={'Features/' + key} /> </> ); }; `; export { key, Component, code };