+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+ |
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ {header.column.getCanFilter() ? (
+
+
+
+ ) : null}
+ |
+ );
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => {
+ return (
+
+
+ {row.getVisibleCells().map((cell) => {
+ return (
+ |
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+ |
+ );
+ })}
+
+ {row.getIsExpanded() && (
+
+ {/* 2nd row is a custom 1 cell row */}
+ |
+ {renderSubComponent({ row })}
+ |
+
+ )}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ Page
+
+ {table.getState().pagination.pageIndex + 1} of{" "}
+ {table.getPageCount()}
+
+
+
+ | Go to page:
+ {
+ const page = e.target.value ? Number(e.target.value) - 1 : 0;
+ table.setPageIndex(page);
+ }}
+ className="border p-1 rounded w-16"
+ />
+
+
+
{table.getPrePaginationRowModel().rows.length} Rows
+ {/* Debug object, uncomment this to see all the values of the table in realtime */}
+ {/* {JSON.stringify(table.getState(), null, 2)} */}
+
+