+
+
+
+ {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 })}
+
+
+ )}
+
+ );
+ })}
+
+
+
+
+
table.setPageIndex(0)}
+ disabled={!table.getCanPreviousPage()}
+ >
+ {"<<"}
+
+
table.previousPage()}
+ disabled={!table.getCanPreviousPage()}
+ >
+ {"<"}
+
+
table.nextPage()}
+ disabled={!table.getCanNextPage()}
+ >
+ {">"}
+
+
table.setPageIndex(table.getPageCount() - 1)}
+ disabled={!table.getCanNextPage()}
+ >
+ {">>"}
+
+
+ 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.setPageSize(Number(e.target.value));
+ }}
+ >
+ {[10, 25, 50].map((pageSize) => (
+
+ Show {pageSize}
+
+ ))}
+
+
+
{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)} */}
+
+ );
+}
+
+function Filter({ column, table }) {
+ const columnFilterValue = column.getFilterValue();
+ return (
+ <>
+