REACT TABLE- Hide rows in table & reset button to display hidden rows - javascript

In my column Show there is a switch button (Toggle doesn't seems working in sandbox, maybe because of tailwindcss? but it works in local...) when you click on it, it will turn the selected row into gray (as if the row is disabled but you can still view the content).
We may have also the possibility to switch again and the original row (without gray) appears.
The VisibilityIcon button above the table will remove from all the table the gray/disabled rows (not working either). And a VisibilityoffIcon button that resets all (we get the original table).
Here what I have done but when I click on the Toggle I get errors and all the table is hidden:
export default function MenuDisplay() {
const { menuId } = useParams();
const { match } = JsonRules;
const dataFindings = match.find((el) => el._id_menu === menuId)?._ids ?? [];
const [disabled, setDisabled] = useState(false);
const toggler_disabled = () => {
disabled ? setDisabled(false) : setDisabled(true);
};
const data = useMemo(
() => [
//some headers ....
{
Header: 'Show',
accessor: (row) =>
<Toggle onClick ={toggler_disabled} value={disabled} onChange=
{setDisabled} />
}
],[]
);
...
return (
{
disabled?
<Table
data = { dataFindings }
columns = { data }
/>
: null
}
);
}

You're using useMemo under row data that memoize all rows which have the same click event without dependencies. If you want to call useMemo with an updated state, you can implement it this way
//`show` is your state
//`data` is your rows
useMemo(() => data, [show])
And the second problem is you track the show state which is only a true/false value. If you want to have multiple row states, you need to keep it as an array.
Here is the full code with some explanation (You also can check this playground)
import Table from "./Table";
import React, { useState, useMemo } from "react";
import JsonData from "./match.json";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
import VisibilityOffIcon from "#mui/icons-material/VisibilityOff";
import VisibilityIcon from "#mui/icons-material/Visibility";
export default function MenuDisplay() {
const { menuId } = useParams();
const { match } = JsonData;
const [hiddenRows, setHiddenRows] = useState([]);
const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];
//update hidden row list
const updateHiddenRows = (rowId) => {
if (hiddenRows.includes(rowId)) {
//remove the current clicked row from the hidden row list
setHiddenRows(hiddenRows.filter((row) => row !== rowId));
} else {
//add the current clicked row from the hidden row list
setHiddenRows([...hiddenRows, rowId]);
}
};
const data = useMemo(() => [
{
Header: "Name",
accessor: (row) =>
//check current row is in hidden rows or not
!hiddenRows.includes(row._id) && (
<Link to={{ pathname: `/menu/${menuId}/${row._id}` }}>
{row.name}
</Link>
)
},
{
Header: "Description",
//check current row is in hidden rows or not
accessor: (row) => !hiddenRows.includes(row._id) && row.description
},
{
Header: "Dishes",
//check current row is in hidden rows or not
accessor: (row) => !hiddenRows.includes(row._id) && row.dishes,
Cell: ({ value }) => value && Object.values(value[0]).join(", ")
},
{
Header: "Show",
accessor: (row) => (
<button onClick={() => updateHiddenRows(row._id)}>
{!hiddenRows.includes(row._id) ? (
<VisibilityIcon>Show</VisibilityIcon>
) : (
<VisibilityOffIcon>Show</VisibilityOffIcon>
)}
</button>
)
}
], [hiddenRows]);
const initialState = {
sortBy: [
{ desc: false, id: "id" },
{ desc: false, id: "description" },
{ desc: false, id: "dishes" }
]
};
return (
<div>
<Table
data={matchData}
columns={data}
initialState={initialState}
withCellBorder
withRowBorder
withSorting
withPagination
/>
</div>
);
}

Keep a map of item ids that are selected and toggle these values via the Toggle component.
Use separate state for the toggle button to filter the selected items.
Implement a row props getter.
Example:
MenuDisplay
function MenuDisplay() {
const { menuId } = useParams();
const { match } = JsonData;
// toggle show/hide button
const [hideSelected, setHideSelected] = useState(false);
// select rows by item id
const [selected, setSelected] = useState({});
const rowSelectHandler = (id) => (checked) => {
setSelected((selected) => ({
...selected,
[id]: checked
}));
};
const toggleShow = () => setHideSelected((hide) => !hide);
const matchData = (
match.find((el) => el._id_menu === menuId)?._ids ?? []
).filter(({ _id }) => {
if (hideSelected) {
return !selected[_id];
}
return true;
});
const getRowProps = (row) => {
return {
style: {
backgroundColor: selected[row.values.id] ? "lightgrey" : "white"
}
};
};
const data = [
{
// add item id to row data
Header: "id",
accessor: (row) => row._id
},
{
Header: "Name",
accessor: (row) => (
<Link to={{ pathname: `/menu/${menuId}/${row._id}` }}>{row.name}</Link>
)
},
{
Header: "Description",
accessor: (row) => row.description
},
{
Header: "Dishes",
accessor: (row) => row.dishes,
id: "dishes",
Cell: ({ value }) => value && Object.values(value[0]).join(", ")
},
{
Header: "Show",
accessor: (row) => (
<Toggle
value={selected[row._id]}
onChange={rowSelectHandler(row._id)}
/>
)
}
];
const initialState = {
sortBy: [
{ desc: false, id: "id" },
{ desc: false, id: "description" }
],
hiddenColumns: ["dishes", "id"] // <-- hide id column too
};
return (
<div>
<button type="button" onClick={toggleShow}>
{hideSelected ? <VisibilityOffIcon /> : <VisibilityIcon />}
</button>
<Table
data={matchData}
columns={data}
initialState={initialState}
withCellBorder
withRowBorder
withSorting
withPagination
rowProps={getRowProps} // <-- pass rowProps getter
/>
</div>
);
}
Table
export default function Table({
className,
data,
columns,
initialState,
withCellBorder,
withRowBorder,
withSorting,
withPagination,
withColumnSelect,
rowProps = () => ({}) // <-- destructure row props getter
}) {
...
return (
<div className={className}>
...
<div className="....">
<table className="w-full" {...getTableProps()}>
<thead className="....">
...
</thead>
<tbody {...getTableBodyProps()}>
{(withPagination ? page : rows).map((row) => {
prepareRow(row);
return (
<tr
className={....}
{...row.getRowProps(rowProps(row))} // <-- call row props getter
>
...
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
}

Related

Why am I not able to post my data with react?

For now, only apply:0 data are displayed by default in my table.I'm trying to send to my API when you click on Apply button, a list of all ids applied and not applied for instance : data:{apply: [3], notApply:[1,2]}.
Hereapply field in my data means the value is equal to 1 --> not displayed in the table; and notApply - i.e equal to 0 --> displaying data.
So when I click on the toggle button under the show column, it should turns to 1 the statusapply (not displaying the row data in my table which is not the case). The Cancel button sends nothing to my API.
Here what I've tried (but not working):
export default function MenuDisplayApi() {
const { menuId } = useParams();
const { match } = JsonData;
const [selected, setSelected] = useState({});
const [hidden, setHidden] = useState({});
const [menus, setMenus] = useState([]);
const [applyStatus, setApplyStatus]=useState(false)
useEffect(() => {
axios.post(url,{menuId:parseInt(menuId)})
.then(res => {
console.log(res)
setMenus(res.data.menus)
})
.catch(err => {
console.log(err)
})
}, [menuId]);
// If any row is selected, the button should be in the Apply state
// else it should be in the Cancel state
const [data, setData]= useState({
notApply:data.notApply,
apply: data.apply
})
function submit(e){
e.preventDefault()
axios.post(url,{
notApply:data.notApply,
apply: data.apply
})
.then(res => {
console.log(res)
})
}
// useEffect(() => {
// const data = {
// notApply:notApply,
// apply: apply
// }
// console.log('check', data)
// }, [])
// function handle(e){
// const newdata={...data}
// newdata[e.target.id]=e.target.value
// setData(newdata)
// console.log(newdata)
// }
const buttonMode = Object.values(selected).some((isSelected) => isSelected)
? "apply"
: "cancel";
const rowSelectHandler = (id) => (checked) => {
setSelected((selected) => ({
...selected,
[id]: checked
}));
};
const handleClick = () => {
if (buttonMode === "apply") {
// Hide currently selected items
const currentlySelected = {};
Object.entries(selected).forEach(([id, isSelected]) => {
if (isSelected) {
currentlySelected[id] = isSelected;
}
});
setHidden({ ...hidden, ...currentlySelected });
// Clear all selection
const newSelected = {};
Object.keys(selected).forEach((id) => {
newSelected[id] = false;
});
setSelected(newSelected);
} else {
// Select all currently hidden items
const currentlyHidden = {};
Object.entries(hidden).forEach(([id, isHidden]) => {
if (isHidden) {
currentlyHidden[id] = isHidden;
}
});
setSelected({ ...selected, ...currentlyHidden });
// Clear all hidden items
const newHidden = {};
Object.keys(hidden).forEach((id) => {
newHidden[id] = false;
});
setHidden(newHidden);
}
};
const matchData = (
menus.filter(({ _id }) => {
return !hidden[_id];
});
const getRowProps = (row) => {
return {
style: {
backgroundColor: selected[row.values.id] ? "lightgrey" : "white"
}
};
};
const data = [
{
Header: "id",
accessor: (row) => row._id
},
{
Header: "Name",
accessor: (row) => (
<Link to={{ pathname: `/menu/${menuId}/${row._id}` }}>{row.name}</Link>
)
},
{
Header: "Description",
//check current row is in hidden rows or not
accessor: (row) => row.description
},
{
Header: "Dishes",
//check current row is in hidden rows or not
accessor: (row) => row.dishes,
id: "dishes",
Cell: ({ value }) => value && Object.values(value[0]).join(", ")
},
{
Header: "Show",
accessor: (row) => (
<Toggle
value={selected[row._id]}
onChange={rowSelectHandler(row._id)}
/>
)
}
];
const initialState = {
sortBy: [
{ desc: false, id: "id" },
{ desc: false, id: "description" }
],
hiddenColumns: ["dishes", "id"]
};
if (menus.apply === 0) {
setApplyStatus(true)
}
if (menus.apply === 1) {
setApplyStatus(false)
}
return (
<div>
<button type="submit" onClick={handleClick}>
{buttonMode === "cancel" ? "Cancel" : "Apply"}
</button>
<Table
data={matchData && (applyStatus ? true : i.apply !== 1)}
columns={data}
initialState={initialState}
withCellBorder
withRowBorder
withSorting
withPagination
rowProps={getRowProps}
/>
</div>
);
}
Here my json from my api for menuId:1:
[
// ...other menus
{
"_id": 3,
"name": "Cucumber Soup ",
"description": "Cucumber Soup",
"dishes": [
{
"meat": "N/A",
"vegetables": "cucumber"
}
],
"taste": "Medium",
"comments": "2/4",
"price": "Medium",
"availability": 1,
"trust": 1,
"status": "Not started",
"apply": 0
}
]
Please check my codeSandbox. It works fine on local json files, so you can have a better understanding regarding what I'm trying.
Please see this picture for better understanding :

How to customize Ant table rowselection

I used Ant table to show some information.
https://codesandbox.io/s/proud-architecture-lsb85?file=/src/index.js
I want to customize the position of the checkbox for row selection.
In this application, you can see the header in the following order of checkbox, Name, Age, Address but I want to swap checkbox and Name.
You can add checkbox columns and customize render and titleRender of it to checkbox and then handle the events. if you incounter performance issue you have to add some memoization on columns or evenet handlers.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table, Button, Checkbox } from "antd";
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`
});
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [], // Check here to configure the default column
loading: false,
allChecked: false
};
this.columns = [
{
title: "Name",
dataIndex: "name"
},
{
dataIndex: "checked",
title: () => {
return (
<Checkbox
checked={this.state.allChecked}
onChange={(e) => this.selectAll(e)}
></Checkbox>
);
},
render: (text, rec, index) => {
return (
<Checkbox
checked={
this.state.selectedRowKeys.includes(rec.key) ||
this.state.allChecked
}
onChange={(e) => this.onChange(e, rec)}
></Checkbox>
);
}
},
{
title: "Age",
dataIndex: "age"
},
{
title: "Address",
dataIndex: "address"
}
];
}
start = () => {
this.setState({ loading: true });
// ajax request after empty completing
setTimeout(() => {
this.setState({
selectedRowKeys: [],
loading: false
});
}, 1000);
};
onChange = (e, rec) => {
const checked = e.target.checked;
if (checked) {
this.setState((state) => ({
...state,
selectedRowKeys: [...state.selectedRowKeys, rec.key]
}));
} else {
this.setState((state) => ({
...state,
selectedRowKeys: [
...state.selectedRowKeys.filter((item) => item !== rec.key)
]
}));
}
};
selectAll = (e) => {
const checked = e.target.checked;
if (checked) {
this.setState((state) => ({
...state,
allChecked: true
}));
} else {
this.setState((state) => ({
...state,
allChecked: false
}));
}
};
onSelectChange = (selectedRowKeys) => {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.setState({ selectedRowKeys });
};
render() {
const { loading, selectedRowKeys } = this.state;
const hasSelected = selectedRowKeys.length > 0;
return (
<div>
<div style={{ marginBottom: 16 }}>
<Button
type="primary"
onClick={this.start}
disabled={!hasSelected}
loading={loading}
>
Reload
</Button>
<span style={{ marginLeft: 8 }}>
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ""}
</span>
</div>
<Table columns={this.columns} dataSource={data} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));

React table column not displaying data

I am using React Table and I am trying to make my table clickable to link to a page different for reach row. but now that i have no error screen my column isn't displaying any data for any of the rows.
(when i take away the
Cell: (props) =>
linkTo(`ticket/[id]`, props.ticket_title, `ticket/${props.ticket_id}`),
everything goes back to normal)
this is my column file:
import { linkTo } from '../utils/linkTo';
import { tableFormatted } from '../utils/tableFormatted';
export const TICKET_COLUMNS = [
{
Header: 'Ticket Number',
accessor: 'ticket_id',
},
{
Header: 'Title',
accessor: (d) => `${d.ticket_title} ${d.ticket_id}`,
Cell: (props) =>
linkTo(`ticket/[id]`, props.ticket_title, `ticket/${props.ticket_id}`),
},
{
Header: 'Description',
accessor: 'ticket_text',
},
{
Header: 'Priority',
accessor: 'ticket_priority',
Cell: (props) => tableFormatted(props.value),
},
{
Header: 'Status',
accessor: 'ticket_status',
Cell: (props) => tableFormatted(props.value),
},
{
Header: 'Type',
accessor: 'ticket_type',
Cell: (props) => tableFormatted(props.value),
},
];
This is my linkTo function that i use to try an make the cell clickable:
import { Link } from '#chakra-ui/layout';
import NextLink from 'next/link';
export const linkTo = (
linkInput: string,
children: string,
asInput?: string
) => {
if (asInput) {
return (
<>
<NextLink href={linkInput} as={asInput}>
<Link>{children}</Link>
</NextLink>
</>
);
} else {
return (
<>
<NextLink href={linkInput}>
<td>{children}</td>
</NextLink>
</>
);
}
};
This is the table itself, though i don't think the table is the problem, but who knows, certainly not me haha.:
import React, { useMemo } from 'react';
import { Table } from 'react-bootstrap';
import { Column, useGlobalFilter, useTable } from 'react-table';
import { GlobalFilter } from './GlobalFilter';
type TestTableProps = {
dataInput: any[];
columnInput: any[];
userInput?: any;
};
export const TestTable: React.FC<TestTableProps> = ({
dataInput,
columnInput,
userInput,
}) => {
const meData = userInput ? userInput : null;
const isData = dataInput ? dataInput : [{}];
const columns = useMemo<Column<object>[]>(() => columnInput, []);
const data = useMemo(() => isData, [isData]);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
} = useTable(
{
columns,
data,
},
useGlobalFilter
);
const { globalFilter } = state;
if (!isData) {
return <>no data</>;
} else {
return (
<>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<Table
{...getTableProps()}
striped
bordered
hover
responsive
variant="dark"
>
<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) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
);
})}
</tr>
);
})}
</tbody>
</Table>
</>
);
}
};

React - Sorting Table Columns Inside a Map() Method

I am trying to sort a table (ascending/descending) when my table header data is placed inside a .map() method (see line 73 of the codesandbox link in this post).
I can get the hand emoji to change onClick, but no sorting takes place. I think it may have something to do with passing an object to the map method, and not an individual string or numeric value as found in the codesandbox that I have based this functionality on. Here is the original sandbox that I am modelling after:
https://codesandbox.io/embed/table-sorting-example-ur2z9?fontsize=14&hidenavigation=1&theme=dark
...and here is my codesandbox with my data structure that I need to sort:
https://codesandbox.io/s/table-sorting-example-forked-dofhj?file=/src/App.js
What can I change in order to get each column to be sortable? Any help/advice would be greatly appreciated.
App.js
import React from "react";
import "./styles.css";
import {
Button,
Table,
Thead,
Tbody,
Flex,
Tooltip,
Tr,
Th,
Td
} from "#chakra-ui/react";
//Table Headers
const TABLE_HEADERS = [
{ name: "ID Number" },
{ name: "User Type" },
{ name: "User Category" },
{ name: "User Interest" }
];
const useSortableData = (items, config = null) => {
const [sortConfig, setSortConfig] = React.useState(config);
const sortedItems = React.useMemo(() => {
let sortableItems = [...items];
if (sortConfig !== null) {
sortableItems.sort((a, b) => {
if (a[sortConfig.key] < b[sortConfig.key]) {
return sortConfig.direction === "ascending" ? -1 : 1;
}
if (a[sortConfig.key] > b[sortConfig.key]) {
return sortConfig.direction === "ascending" ? 1 : -1;
}
return 0;
});
}
return sortableItems;
}, [items, sortConfig]);
const requestSort = (key) => {
let direction = "ascending";
if (
sortConfig &&
sortConfig.key === key &&
sortConfig.direction === "ascending"
) {
direction = "descending";
}
setSortConfig({ key, direction });
};
return { items: sortedItems, requestSort, sortConfig };
};
const ProductTable = (props) => {
const { items, requestSort, sortConfig } = useSortableData(
props.myUserErrorTypes
);
const getClassNamesFor = (name) => {
if (!sortConfig) {
return;
}
return sortConfig.key === name ? sortConfig.direction : undefined;
};
return (
<Table>
<caption>User Error Types</caption>
<Thead>
<Tr>
{TABLE_HEADERS.map(({ name, description, isNumeric }) => (
<Th key={name} isNumeric={isNumeric}>
<Button
type="button"
onClick={() => requestSort(name)}
className={getClassNamesFor(name)}
>
<Tooltip label={description} aria-label={description}>
{name}
</Tooltip>
</Button>
</Th>
))}
</Tr>
</Thead>
<Tbody>
{items.map((error) => {
const { userNumber, userType, errorId, errorCategory } = error;
return (
<React.Fragment key={errorId}>
<Tr id={errorId} key={errorId}>
<Td>{userNumber}</Td>
<Td>{userType}</Td>
<Td>{errorId}</Td>
<Td>{errorCategory}</Td>
<Td textAlign="center">
<Flex justify="justifyContent"></Flex>
</Td>
</Tr>
</React.Fragment>
);
})}
</Tbody>
</Table>
);
};
export default function App() {
return (
<div className="App">
<ProductTable
myUserErrorTypes={[
{
userNumber: 1234567890,
userType: "SuperUser",
errorId: 406,
errorCategory: "In-Progress"
},
{
userNumber: 4859687937,
userType: "NewUser",
errorId: 333,
errorCategory: "Complete"
}
]}
/>
</div>
);
}
The items are being sorted by the table header name (e.g. 'ID Number') since you're calling requestSort with the name. Add an id property to the objects in the TABLE_HEADERS array matching the property name (e.g. userNumber) in the data objects and pass it as an argument to both the requestSort and getClassNamesFor functions.
const TABLE_HEADERS = [
{ name: 'ID Number', id: 'userNumber' },
{ name: 'User Type', id: 'userType' },
{ name: 'User Category', id: 'errorId' },
{ name: 'User Interest', id: 'errorCategory' },
]
{
TABLE_HEADERS.map(({ name, id }) => (
<Th key={id}>
<Button
type="button"
onClick={() => requestSort(id)}
className={getClassNamesFor(id)}
>
{name}
</Button>
</Th>
))
}
You're also trying to use the description and isNumeric values from the header object but they are both undefined. You might want to add those properties to the objects in the TABLE_HEADERS array.

React Table displaying no result when I use setFilter

I have a table with a global filter and a setFilter.
The global filter works fine and filters the results except for the customField column that I have as an optional column and may or may not have data.
For the custom fields column, I want to create a separate input that filters only that column but when I type into it all the records just disappear and I get no errors, so I'm not sure what's going on.
I would really appreciate any help, thank you.
Record Table
import React from "react";
import {
useTable,
useFlexLayout,
useFilters,
useGlobalFilter
} from "react-table";
import _ from "lodash";
// noinspection ES6CheckImport
import { useHistory } from "react-router-dom";
import Table from "react-bootstrap/Table";
import { useStateWithLocalStorage } from "../../hooks/useStateWithLocalStorage";
// Define a default UI for filtering
function GlobalFilter({
preGlobalFilteredRows,
globalFilter,
setGlobalFilter
}) {
return (
<span>
<input
value={globalFilter || ""}
onChange={e => {
setGlobalFilter(e.target.value || undefined);
}}
placeholder={" Search By Any Field"}
style={{
fontSize: "2.0rem",
width: "100%"
}}
/>
</span>
);
}
function CustomFieldFilter({ filter, setFilter }) {
return (
<input
value={filter || ""}
onChange={e => {
setFilter("customFields", e.target.value || undefined);
}}
placeholder={`Search Custom Field`}
/>
);
}
export const RecordTable = ({ forms }) => {
//TODO figure out why react-table crashes if forms is not set to data variable below first
const data = forms;
let history = useHistory();
const customFields = JSON.parse(localStorage.getItem("..."));
let customFieldName = "";
if (Array.isArray(customFields) && customFields.length) {
customFieldName = customFields[0].customFieldName;
} else {
customFieldName = "Custom Field";
}
const columns = React.useMemo(
() => [
{
Header: "Form Records",
columns: [
{
Header: "Child First Name",
id: "children",
accessor: values => {
let childNames = [];
_.map(values.children, child => {
childNames.push(child.childName);
});
return childNames.join(", ");
}
},
{
Header: "Time In",
accessor: "timeIn"
},
{
Header: "Time Out",
accessor: "timeOut"
},
{
Header: "Guardian Name",
accessor: "parentName"
},
{
Header: customFieldName,
id: "customFields",
accessor: value => {
const customFields = value.customFields;
if (
Array.isArray(customFields) &&
customFields.length &&
customFields[0].customFieldName === customFieldName
)
return <div>{customFields[0].customFieldValue}</div>;
}
}
]
}
],
[]
);
const defaultColumn = React.useMemo(
() => ({
//Filter: CustomFieldFilter,
minWidth: 20,
maxWidth: 150,
width: 120
}),
[]
);
const openViewDisclaimerPage = rowObject => {
console.log(rowObject.original);
history.push("/viewform", { ...rowObject.original });
};
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
preGlobalFilteredRows,
setFilter,
setGlobalFilter
} = useTable(
{
columns,
data,
defaultColumn
},
useFilters,
useGlobalFilter,
useFlexLayout
);
// Render the UI for your table
return (
<div>
<div>Records: {rows.length}</div>
<GlobalFilter
preGlobalFilteredRows={preGlobalFilteredRows}
globalFilter={state.globalFilter}
setGlobalFilter={setGlobalFilter}
/>
<CustomFieldFilter filter={state.filter} setFilter={setFilter} />
<div
style={{
height: 500,
border: "2px solid grey",
borderRadius: "5px",
overflow: "scroll"
}}>
<Table striped bordered hover responsive={"md"} {...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({
onClick: () => openViewDisclaimerPage(row)
})}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
);
})}
</tr>
);
})}
</tbody>
</Table>
</div>
</div>
);
};
Here is a quick recording of whats happening.

Categories