Implementing React table expanded rows - reactjs

Question

It's my first time to use react-table librabry. I am struggling for the previous couple of days how to implement the expansion functionality using useExpanded hook
Docs and all the examples available are not clear about that so, here is my code and hope if somone can give me a hand in that
const accountData = [
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Oriana Hospital",
accountType: "Hospital ",
city: "Sharjah",
area: "Al Khan",
street: "Al Taawun",
location: "https://goo.gl/maps/Jx6oTCbXyq9C8Mrt7",
hasBranches: true,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 1,
expand: false,
branches: [
{
branchName: "Oriana Pulman ",
branchType: "Hospital ",
branchCity: "Sharjah",
branchArea: "Sharjah",
branchStreet: "Al Khan",
branchLocation: "Al Taawun",
_id: "622e2f05cc18e17eb608541a",
},
],
_id: "622e2f04cc18e17eb6085419",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Ajman Speciality",
accountType: "Hospital ",
city: "Ajman",
area: "Ajman",
street: "Al Ittihad Road",
location: "https://goo.gl/maps/9aizJaNxT7iMDVry6",
hasBranches: false,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 0,
expand: false,
branches: [],
_id: "622e2f05cc18e17eb608541b",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Al Ittihad Medical Center",
accountType: "Clinic",
city: "Ajman",
area: "Al Swan",
street: "Ittihad ",
location: "https://goo.gl/maps/ppLNbPB9CdGWqFpy6",
hasBranches: false,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 0,
expand: false,
branches: [],
_id: "622e2ff2a2c75bcb9aaf640e",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Al Zaora Medical Center",
accountType: "Clinic",
city: "Ajman",
area: "Al Swan",
street: "Ittihad ",
location: "https://goo.gl/maps/PZr5PqFf28rpdgYJ7",
hasBranches: false,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 0,
expand: false,
branches: [],
_id: "622e2ff2a2c75bcb9aaf640f",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Amina Hospital",
accountType: "Hospital ",
city: "Ajman",
area: "Al Swan",
street: "Ittihad ",
location: "https://goo.gl/maps/Bxn7tedGQxUZFNqa8",
hasBranches: true,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 3,
expand: false,
branches: [
{
branchName: "Ibn Sina ",
branchType: "Clinic",
branchCity: "Ajman",
branchArea: "Al Swan",
branchStreet: "Ittihad",
branchLocation: "https://goo.gl/maps/M3WemaX4ehbp6rSS6",
_id: "622e2ff2a2c75bcb9aaf6411",
},
{
branchName: "Amina Al Jurf",
branchType: "Clinic",
branchCity: "Ajman",
branchArea: "Al Jurf",
branchStreet: "Sheikh Khalifa",
branchLocation: "https://goo.gl/maps/VGgU5TGSBvaUnGqm6",
_id: "622e2ff2a2c75bcb9aaf6412",
},
{
branchName: "Family Medical Center",
branchType: "Clinic",
branchCity: "Ajman",
branchArea: "Ajman",
branchStreet: "Industiral Ajman",
branchLocation: "https://goo.gl/maps/wvqTbtuRakzaYTWg7",
_id: "622e2ff2a2c75bcb9aaf6413",
},
],
_id: "622e2ff2a2c75bcb9aaf6410",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Al Garhoud Private Hospital",
accountType: "Hospital ",
city: "Dubai",
area: "Al Garhoud",
street: "Reiyadh",
location: "https://goo.gl/maps/LVpuJhMBT2MrobPT6",
hasBranches: true,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 1,
expand: false,
branches: [
{
branchName: "Al Garhoud 2",
branchType: "Hospital ",
branchCity: "Dubai",
branchArea: "Mirdif",
branchStreet: "Sheikh Mohamed Bin Zayed",
branchLocation: "https://goo.gl/maps/p2bKwpnBuLaH2yxS8",
_id: "622e2ff2a2c75bcb9aaf6415",
},
],
_id: "622e2ff2a2c75bcb9aaf6414",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Emirates Hospital",
accountType: "Hospital ",
city: "Dubai",
area: "Jumeirah",
street: "Al Wasl",
location: "https://goo.gl/maps/gqHVMFvhpnGgDCiL8",
hasBranches: true,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 2,
expand: false,
branches: [
{
branchName: "Emirates Marina",
branchType: "Hospital ",
branchCity: "Dubai",
branchArea: "Marina",
branchStreet: "Marina",
branchLocation: "https://goo.gl/maps/p2bKwpnBuLaH2yxS8",
_id: "622e2ff2a2c75bcb9aaf6417",
},
{
branchName: "Emirates Clinic",
branchType: "Clinic",
branchCity: "RAK",
branchArea: "RAK",
branchStreet: "Khalid street ",
branchLocation: "https://goo.gl/maps/NMN68z5VqB9AoUKS7",
_id: "622e2ff2a2c75bcb9aaf6418",
},
],
_id: "622e2ff2a2c75bcb9aaf6416",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Al Shams Medical Diagnsotice Center",
accountType: "Group",
city: "Sharjah",
area: "Industrial area",
street: "Shams",
location: "https://g.page/alshamsmedicalgroup?share",
hasBranches: true,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 2,
expand: false,
branches: [
{
branchName: "Al Shams Al Jadeed ",
branchType: "Clinic",
branchCity: "Sharjah",
branchArea: "Industrial Sharjah",
branchStreet: "Demuscus",
branchLocation: "https://goo.gl/maps/ZbEn1or58nYKhvSK9",
_id: "622e2ff2a2c75bcb9aaf641a",
},
{
branchName: "Al Shams Clinic",
branchType: "Clinic",
branchCity: "Sharjah",
branchArea: "Industrial 3",
branchStreet: "unknown street",
branchLocation: "https://goo.gl/maps/391Dz4B4EkxASjjm6",
_id: "622e2ff2a2c75bcb9aaf641b",
},
],
_id: "622e2ff2a2c75bcb9aaf6419",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Ibn Batuta DrugStore",
accountType: "Drugstore",
city: "Sharjah",
area: "Al Nema",
street: "Al Nema",
location: "https://goo.gl/maps/6jka7BaGCguTXTza7",
hasBranches: false,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 0,
expand: false,
branches: [],
_id: "622e2ff2a2c75bcb9aaf641c",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Tamimi Drug Store",
accountType: "Drugstore",
city: "Sharjah",
area: "Industrial area",
street: "Industrial ",
location: "https://goo.gl/maps/ybWjXf2ZTBCsi5r68",
hasBranches: false,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 0,
expand: false,
branches: [],
_id: "622e2ff2a2c75bcb9aaf641d",
},
{
company: "621bb1bda49c57b938fb9b8c",
country: "6228dac2ad9aef4e064906c3",
accountName: "Al Zaora Pharmacy",
accountType: "Pharmacy",
city: "Ajman",
area: "Al Swan",
street: "Ittihad ",
location: "https://goo.gl/maps/PZr5PqFf28rpdgYJ7",
hasBranches: false,
numberOfDoctors: null,
accountNotes: [],
numberOfBranches: 0,
expand: false,
branches: [],
_id: "622e2ff2a2c75bcb9aaf641e",
},
];
export default accountData;
Then in the table if the account hasBranches is true I want to show expanding button to show the branches only onClick
and here is table code
import {
useTable,
useGlobalFilter,
useFilters,
usePagination,
useSortBy,
useRowSelect,
useExpanded,
} from "react-table";
import ColumnFilter from "./ColumnFilter";
import accountData from "./Data";
import { Columns } from "./Columns";
import { useMemo } from "react";
import "./table.css";
import GlobalFilter from "./GlobalFilter";
import { CheckBox } from "./CheckBos";
const PaginationTable = (props) => {
const columns = useMemo(() => Columns, []);
const data = useMemo(() => accountData, []);
const defaultColumns = useMemo(() => {
return {
Filter: ColumnFilter,
};
}, []);
const onClickRow = (e) => {
const row = e.target;
console.log(row);
};
const tableInstance = useTable(
{
columns,
data,
defaultColumns,
expanded: {},
},
useFilters,
useGlobalFilter,
useSortBy,
useExpanded,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => [
// Let's make a column for selection
{
id: "selection",
Header: ({ getToggleAllPageRowsSelectedProps }) => (
<div>
<CheckBox {...getToggleAllPageRowsSelectedProps()} />
</div>
),
Cell: ({ row }) => (
<div>
<CheckBox {...row.getToggleRowSelectedProps()} />
</div>
),
},
{
// Build our expander column
id: "expander", // Make sure it has an ID
Header: ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) => (
<span {...getToggleAllRowsExpandedProps()}>
{isAllRowsExpanded ? "👇" : "👉"}
</span>
),
Cell: ({ row, index }) =>
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
// to build the toggle for expanding a row
row.canExpand
? (row.canExpand,
(
<span
onClick={() => {
console.log(row);
}}
{...row.getToggleRowExpandedProps({
style: {
// We can even use the row.depth property
// and paddingLeft to indicate the depth
// of the row
paddingLeft: `${row.depth * 2}rem`,
},
})}
>
{row.isExpanded ? "👇" : "👉"}
</span>
))
: null,
},
...columns,
]);
}
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
rows,
getRowId,
rowsById,
getSubRows,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
prepareRow,
gotoPage,
pageCount,
setPageSize,
canExpand,
selectedFlatRows,
allColumns,
getToggleHideAllColumnsProps,
state,
setGlobalFilter,
} = tableInstance;
const { globalFilter, pageIndex, pageSize, expanded } = state;
const expandedRows = useMemo(() => {
if (accountData?.hasBranches) {
let arr = [{ 0: false }];
let d = accountData.hasBranches;
if (d.getGroupedSamplingStationBySystemId.length > 0) {
arr = d.getGroupedSamplingStationBySystemId.map((sid, ind) => {
return { [ind]: true };
});
}
return arr;
}
}, []);
// console.log(canExpand);
return (
<>
<div className="hiding">
<div className="toggleVisibility">
<CheckBox {...getToggleHideAllColumnsProps()} /> Toggle All
</div>
{allColumns.map((column) => (
<div key={column.id}>
<label>
<input type="checkbox" {...column.getToggleHiddenProps()} />
{column.Header}
</label>
</div>
))}
</div>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<table {...getTableProps()} className="table">
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render("Header")}
<div>{column.canFilter ? column.render("Filter") : null}</div>
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
</th>
))}
</tr>
))}
<tr></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>
<pre>
<code>
{JSON.stringify(
{ selectedFlatRows: selectedFlatRows.map((row) => row.original) },
null,
2
)}
,
</code>
</pre>
<pre>
<code>{JSON.stringify({ expanded: expanded }, null, 2)}</code>
</pre>
<div className="pagination">
<span className="pages">
Page{" "}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{" "}
</span>
<span className="pages">
| Go to Page{" "}
<input
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
className="pageNumber"
style={{ width: "50px" }}
/>
</span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
className="paginationDropDown"
>
{[5, 10, 25, 50].map((pageSize) => {
return (
<option key={pageSize} value={pageSize}>
Show {pageSize} per page
</option>
);
})}
</select>
<button
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
className="paginationButton"
>
{"<<"}
</button>
<button
onClick={() => previousPage()}
disabled={!canPreviousPage}
className="paginationButton"
>
Previous
</button>
<button
onClick={() => nextPage()}
disabled={!canNextPage}
className="paginationButton"
>
Next
</button>
<button
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
className="paginationButton"
>
{">>"}
</button>
</div>
</>
);
};
export default PaginationTable;
and here is the screen I am getting
and here is row log
> allCells: (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] canExpand:
> false cells: (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] depth:
> 0 getRowProps: ƒ (userProps) getToggleRowExpandedProps: ƒ (userProps)
> getToggleRowSelectedProps: ƒ (userProps) id: "12" index: 12
> isExpanded: undefined isSelected: false isSomeSelected: false
> original: {company: '621bb1bda49c57b938fb9b8c', country:
> '6228dac2ad9aef4e064906c3', accountName: 'Prime Medical Center',
> accountType: 'Group', city: 'Dubai', …} originalSubRows: [] subRows:
> [] toggleRowExpanded: ƒ (set) toggleRowSelected: ƒ (set) values:
> {accountName: 'Prime Medical Center', accountType: 'Group', city:
> 'Dubai', area: 'Qusais', street: 'Industrial ', …} [[Prototype]]:
> Object
OK, then I am sure it gonna be something very simple to be added
what I need to know is
How to detect expanded rows
Where to put the subrows code in the table
How to show them conditionally
I will be grateful if I can get any help soon
Thanks in advance

Answer 1

For anyone might come here I finally found the solution in this link https://www.freakyjolly.com/react-table-tutorial/ and here also my code
import accountData from "./Data";
export const modifiedData = accountData.map((d) => {
return {
accountName: d.accountName,
accountType: d.accountType,
city: d.city,
area: d.area,
street: d.street,
location: d.location,
numberOfBranches: d.numberOfBranches,
subRows: !d.hasBranches
? null
: d.branches.map((b) => {
return {
accountName: b.branchName,
accountType: b.branchType,
city: b.branchCity,
area: b.branchArea,
street: b.branchStreet,
location: b.branchLocation,
numberOfBranches: 0,
};
}),
};
});