react-table#TableInstance TypeScript Examples
The following examples show how to use
react-table#TableInstance.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Domains.tsx From crossfeed with Creative Commons Zero v1.0 Universal | 5 votes |
|
Domains: React.FC = () => {
const { showAllOrganizations } = useAuthContext();
const tableRef = useRef<TableInstance<Domain>>(null);
const columns = useMemo(() => createColumns(), []);
const [domains, setDomains] = useState<Domain[]>([]);
const [totalResults, setTotalResults] = useState(0);
const { listDomains } = useDomainApi(showAllOrganizations);
const fetchDomains = useCallback(
async (q: Query<Domain>) => {
try {
const { domains, count } = await listDomains(q);
setDomains(domains);
setTotalResults(count);
} catch (e) {
console.error(e);
}
},
[listDomains]
);
const fetchDomainsExport = async (): Promise<string> => {
const { sortBy, filters } = tableRef.current?.state ?? {};
try {
const { url } = await listDomains(
{
sort: sortBy ?? [],
page: 1,
pageSize: -1,
filters: filters ?? []
},
true
);
return url!;
} catch (e) {
console.error(e);
return '';
}
};
const renderPagination = (table: TableInstance<Domain>) => (
<Paginator
table={table}
totalResults={totalResults}
export={{
name: 'domains',
getDataToExport: fetchDomainsExport
}}
/>
);
return (
<div className={classes.root}>
<Subnav
items={[
{ title: 'Search Results', path: '/inventory', exact: true },
{ title: 'All Domains', path: '/inventory/domains' },
{ title: 'All Vulnerabilities', path: '/inventory/vulnerabilities' }
]}
></Subnav>
<br></br>
<Table<Domain>
renderPagination={renderPagination}
tableRef={tableRef}
columns={columns}
data={domains}
pageCount={Math.ceil(totalResults / PAGE_SIZE)}
fetchData={fetchDomains}
pageSize={PAGE_SIZE}
/>
</div>
);
}
Example #2
| Source File: ConfirmationOfReceiptPage.tsx From solo with MIT License | 5 votes |
|
ConfirmationOfReceiptPage: React.FC = () => {
const [bulkReceivedBy, setBulkReceivedBy] = useState("");
const {
docs,
updateDocuments,
pageCount,
submitCOR,
submitBulkCOR,
bulkSubmitStatus,
resetBulkSubmitStatus
} = useCORDocuments();
const columns = useMemo(
() =>
createColumns({
onSubmitCOR: submitCOR
}),
[submitCOR]
);
const onSelectedRowsChange = useCallback(
({ toggleHideColumn, selectedFlatRows }: TableInstance<Document>) => {
// show individual row submit forms only when no rows are selected
resetBulkSubmitStatus();
toggleHideColumn("submitCOR", selectedFlatRows.length > 0);
},
[resetBulkSubmitStatus]
);
const renderPagination = (table: TableInstance<Document>) => (
<>{table.selectedFlatRows.length === 0 && <Paginator table={table} />}</>
);
const renderFilterControls = (table: TableInstance<Document>) => {
const { setGlobalFilter, selectedFlatRows } = table;
return selectedFlatRows.length > 0 ? (
<CORInputForm
value={bulkReceivedBy}
onReceivedByChange={setBulkReceivedBy}
onSubmitCOR={() =>
submitBulkCOR(
selectedFlatRows.map(({ original }) => original.sdn),
bulkReceivedBy
)
}
actionText={`Submit ${selectedFlatRows.length} Cors`}
className="margin-left-2 padding-y-2 flex-justify-center"
{...bulkSubmitStatus}
/>
) : (
<SelectFilterControls options={filterable} onSubmit={setGlobalFilter} />
);
};
return (
<div className="tablet:margin-x-8 overflow-x-auto">
<Title>Confirmation of Receipt</Title>
<Table<Document>
columns={columns}
data={docs}
onSelectedRowsChange={onSelectedRowsChange}
renderFilterControls={renderFilterControls}
renderPagination={renderPagination}
pageCount={pageCount}
fetchData={updateDocuments}
/>
</div>
);
}
Example #3
| Source File: StatusPage.tsx From solo with MIT License | 5 votes |
|
StatusPage: React.FC = () => {
const { docs, updateDocuments, pageCount } = useDocumentSet();
const tableColumns = useMemo(createColumns, []);
const renderSubComponent = ({
original: { shipTo, holder, part, statuses }
}: Row<Document>) => (
<>
<DocumentStepper statuses={statuses} />
<DocumentDetails
shipper={holder}
receiver={shipTo}
part={part}
statuses={statuses}
/>
</>
);
const renderPagination = (table: TableInstance<Document>) => (
<Paginator table={table} />
);
const renderFilterControls = ({
setGlobalFilter
}: TableInstance<Document>) => (
<SelectFilterControls options={filterable} onSubmit={setGlobalFilter} />
);
return (
<div className="tablet:margin-x-8 overflow-x-auto">
<Title>Status</Title>
<Table<Document>
columns={tableColumns}
data={docs}
renderSubComponent={renderSubComponent}
renderPagination={renderPagination}
renderFilterControls={renderFilterControls}
fetchData={updateDocuments}
pageCount={pageCount}
/>
</div>
);
}
Example #4
| Source File: ScanTasksView.tsx From crossfeed with Creative Commons Zero v1.0 Universal | 4 votes |
|
ScanTasksView: React.FC = () => {
const { apiPost, token } = useAuthContext();
const [scanTasks, setScanTasks] = useState<ScanTask[]>([]);
const [totalResults, setTotalResults] = useState(0);
const [errors, setErrors] = useState<Errors>({});
const killScanTask = async (index: number) => {
try {
const row = scanTasks[index];
await apiPost(`/scan-tasks/${row.id}/kill`, { body: {} });
setScanTasks(
Object.assign([], scanTasks, {
[index]: {
...row,
status: 'failed'
}
})
);
} catch (e) {
setErrors({
global:
e.status === 422 ? 'Unable to kill scan' : e.message ?? e.toString()
});
console.log(e);
}
};
const renderExpanded = (row: Row<ScanTask>) => {
const { original } = row;
return (
<div className={classes.expandedRoot}>
{original.fargateTaskArn && (
<>
<h4>
Logs
{original.fargateTaskArn?.match('.*/(.*)') && (
<a
target="_blank"
rel="noopener noreferrer"
href={`https://us-east-1.console.aws.amazon.com/cloudwatch/home?region=us-east-1#logsV2:log-groups/log-group/${process
.env
.REACT_APP_FARGATE_LOG_GROUP!}/log-events/worker$252Fmain$252F${
(original.fargateTaskArn.match('.*/(.*)') || [])[1]
}`}
>
{' '}
(View all on CloudWatch)
</a>
)}
</h4>
<Log
token={token ?? ''}
url={`${process.env.REACT_APP_API_URL}/scan-tasks/${original.id}/logs`}
/>
</>
)}
<h4>Input</h4>
<small>
<pre>{JSON.stringify(JSON.parse(original.input), null, 2)}</pre>
</small>
<h4>Output</h4>
<small>
<pre>{original.output || 'None'}</pre>
</small>
{row.original.status !== 'finished' &&
row.original.status !== 'failed' && (
<>
<h4>Actions</h4>
<a
href="# "
onClick={(e) => {
e.preventDefault();
killScanTask(row.index);
}}
>
Kill
</a>
</>
)}
</div>
);
};
const columns: Column<ScanTask>[] = [
{
Header: 'ID',
accessor: 'id',
Filter: ColumnFilter,
disableSortBy: true,
disableFilters: true
},
{
Header: 'Status',
accessor: 'status',
Filter: selectFilter([
'created',
'queued',
'requested',
'started',
'finished',
'failed'
]),
disableSortBy: true
},
{
Header: 'Name',
id: 'name',
accessor: ({ scan }) => scan?.name,
Filter: selectFilter([
// TODO: sync this with the SCAN_SCHEMA
'censys',
'amass',
'findomain',
'portscanner',
'wappalyzer',
'censysIpv4',
'censysCertificates',
'sslyze',
'searchSync',
'cve',
'dotgov',
'webscraper',
'intrigueIdent',
'shodan',
'hibp',
'lookingGlass',
'dnstwist',
'peCybersixgill',
'peHibpSync',
'peShodan',
'peDomMasq',
'rootDomainSync'
]),
disableSortBy: true
},
{
Header: 'Created At',
id: 'createdAt',
accessor: ({ createdAt }) => dateAccessor(createdAt),
disableFilters: true
},
{
Header: 'Finished At',
id: 'finishedAt',
accessor: ({ finishedAt }) => dateAccessor(finishedAt),
disableFilters: true
},
{
Header: 'Details',
Cell: ({ row }: CellProps<ScanTask>) => (
<span
{...row.getToggleRowExpandedProps()}
className="text-center display-block"
>
{row.isExpanded ? <FaMinus /> : <FaPlus />}
</span>
),
disableFilters: true
}
];
const PAGE_SIZE = 25;
const fetchScanTasks = useCallback(
async (query: Query<ScanTask>) => {
const { page, sort, filters } = query;
try {
const { result, count } = await apiPost<ApiResponse>(
'/scan-tasks/search',
{
body: {
page,
sort: sort[0]?.id ?? 'createdAt',
order: sort[0]?.desc ? 'DESC' : 'ASC',
filters: filters
.filter((f) => Boolean(f.value))
.reduce(
(accum, next) => ({
...accum,
[next.id]: next.value
}),
{}
)
}
}
);
setScanTasks(result);
setTotalResults(count);
} catch (e) {
console.error(e);
}
},
[apiPost]
);
const renderPagination = (table: TableInstance<ScanTask>) => (
<Paginator table={table} totalResults={totalResults} />
);
return (
<>
{errors.global && <p className={classes.error}>{errors.global}</p>}
<Table<ScanTask>
renderPagination={renderPagination}
columns={columns}
data={scanTasks}
pageCount={Math.ceil(totalResults / PAGE_SIZE)}
fetchData={fetchScanTasks}
pageSize={PAGE_SIZE}
initialSortBy={[
{
id: 'createdAt',
desc: true
}
]}
renderExpanded={renderExpanded}
/>
</>
);
}
Example #5
| Source File: Vulnerabilities.tsx From crossfeed with Creative Commons Zero v1.0 Universal | 4 votes |
|
Vulnerabilities: React.FC<{ groupBy?: string }> = ({
groupBy = undefined
}: {
children?: React.ReactNode;
groupBy?: string;
}) => {
const {
currentOrganization,
apiPost,
apiPut,
showAllOrganizations
} = useAuthContext();
const [vulnerabilities, setVulnerabilities] = useState<Vulnerability[]>([]);
const [totalResults, setTotalResults] = useState(0);
const tableRef = useRef<TableInstance<Vulnerability>>(null);
const listClasses = useStyles();
const [noResults, setNoResults] = useState(false);
const updateVulnerability = useCallback(
async (index: number, body: { [key: string]: string }) => {
try {
const res = await apiPut<Vulnerability>(
'/vulnerabilities/' + vulnerabilities[index].id,
{
body: body
}
);
const vulnCopy = [...vulnerabilities];
vulnCopy[index].state = res.state;
vulnCopy[index].substate = res.substate;
vulnCopy[index].actions = res.actions;
setVulnerabilities(vulnCopy);
} catch (e) {
console.error(e);
}
},
[setVulnerabilities, apiPut, vulnerabilities]
);
const columns = useMemo(() => createColumns(updateVulnerability), [
updateVulnerability
]);
const groupedColumns = useMemo(() => createGroupedColumns(), []);
const vulnerabilitiesSearch = useCallback(
async ({
filters,
sort,
page,
pageSize = PAGE_SIZE,
doExport = false,
groupBy = undefined
}: {
filters: Filters<Vulnerability>;
sort: SortingRule<Vulnerability>[];
page: number;
pageSize?: number;
doExport?: boolean;
groupBy?: string;
}): Promise<ApiResponse | undefined> => {
try {
const tableFilters: {
[key: string]: string | boolean | undefined;
} = filters
.filter((f) => Boolean(f.value))
.reduce(
(accum, next) => ({
...accum,
[next.id]: next.value
}),
{}
);
// If not open or closed, substitute for appropriate substate
if (
tableFilters['state'] &&
!['open', 'closed'].includes(tableFilters['state'] as string)
) {
const substate = (tableFilters['state'] as string)
.match(/\((.*)\)/)
?.pop();
if (substate)
tableFilters['substate'] = substate.toLowerCase().replace(' ', '-');
delete tableFilters['state'];
}
if (!showAllOrganizations && currentOrganization) {
if ('rootDomains' in currentOrganization)
tableFilters['organization'] = currentOrganization.id;
else tableFilters['tag'] = currentOrganization.id;
}
if (tableFilters['isKev']) {
// Convert string to boolean filter.
tableFilters['isKev'] = tableFilters['isKev'] === 'true';
}
return await apiPost<ApiResponse>(
doExport ? '/vulnerabilities/export' : '/vulnerabilities/search',
{
body: {
page,
sort: sort[0]?.id ?? 'createdAt',
order: sort[0]?.desc ? 'DESC' : 'ASC',
filters: tableFilters,
pageSize,
groupBy
}
}
);
} catch (e) {
console.error(e);
return;
}
},
[apiPost, currentOrganization, showAllOrganizations]
);
const fetchVulnerabilities = useCallback(
async (query: Query<Vulnerability>) => {
const resp = await vulnerabilitiesSearch({
filters: query.filters,
sort: query.sort,
page: query.page,
groupBy
});
if (!resp) return;
const { result, count } = resp;
setVulnerabilities(result);
setTotalResults(count);
setNoResults(count === 0);
},
[vulnerabilitiesSearch, groupBy]
);
const fetchVulnerabilitiesExport = async (): Promise<string> => {
const { sortBy, filters } = tableRef.current?.state ?? {};
const { url } = (await vulnerabilitiesSearch({
filters: filters!,
sort: sortBy!,
page: 1,
pageSize: -1,
doExport: true
})) as ApiResponse;
return url!;
};
const renderPagination = (table: TableInstance<Vulnerability>) => (
<Paginator
table={table}
totalResults={totalResults}
export={{
name: 'vulnerabilities',
getDataToExport: fetchVulnerabilitiesExport
}}
/>
);
const initialFilterBy: Filters<Vulnerability> = [];
let initialSortBy: SortingRule<Vulnerability>[] = [];
const params = parse(window.location.search);
if (!('state' in params)) params['state'] = 'open';
for (const param of Object.keys(params)) {
if (param === 'sort') {
initialSortBy = [
{
id: params[param] as string,
desc: 'desc' in params ? params['desc'] === 'true' : true
}
];
} else if (param !== 'desc') {
initialFilterBy.push({
id: param,
value: params[param] as string
});
}
}
return (
<div>
<div className={listClasses.contentWrapper}>
<Subnav
items={[
{ title: 'Search Results', path: '/inventory', exact: true },
{ title: 'All Domains', path: '/inventory/domains' },
{ title: 'All Vulnerabilities', path: '/inventory/vulnerabilities' }
]}
></Subnav>
<br></br>
<div className={classes.root}>
<Table<Vulnerability>
renderPagination={renderPagination}
columns={groupBy ? groupedColumns : columns}
data={vulnerabilities}
pageCount={Math.ceil(totalResults / PAGE_SIZE)}
fetchData={fetchVulnerabilities}
tableRef={tableRef}
initialFilterBy={initialFilterBy}
initialSortBy={initialSortBy}
noResults={noResults}
pageSize={PAGE_SIZE}
noResultsMessage={
"We don't see any vulnerabilities that match your criteria."
}
/>
</div>
</div>
</div>
);
}
Example #6
| Source File: paginator.spec.tsx From solo with MIT License | 4 votes |
|
describe("Paginator component", () => {
const nextPageMock = jest.fn();
const prevPageMock = jest.fn();
const gotoPageMock = jest.fn();
const defaultTableInstance = ({
canPreviousPage: true,
canNextPage: true,
previousPage: prevPageMock,
nextPage: nextPageMock,
gotoPage: gotoPageMock,
pageCount: 100,
state: { pageIndex: 10 }
} as unknown) as TableInstance;
afterEach(() => {
nextPageMock.mockReset();
prevPageMock.mockReset();
gotoPageMock.mockReset();
});
it("matches snapshot", () => {
const { asFragment } = render(<Paginator table={defaultTableInstance} />);
expect(asFragment()).toMatchSnapshot();
});
it("goes to first page on first link click", async () => {
const { getByText } = render(<Paginator table={defaultTableInstance} />);
const firstPage = getByText("First");
fireEvent.click(firstPage);
await wait(() => {
expect(gotoPageMock).toHaveBeenCalled();
expect(gotoPageMock.mock.calls[0][0]).toEqual(0);
});
});
it("goes to previous page on previous page click", async () => {
const { getByText } = render(<Paginator table={defaultTableInstance} />);
const firstPage = getByText("Previous");
fireEvent.click(firstPage);
await wait(() => {
expect(prevPageMock).toHaveBeenCalled();
});
});
it("goes to next page on next page click", async () => {
const { getByText } = render(<Paginator table={defaultTableInstance} />);
const nextPage = getByText("Next");
fireEvent.click(nextPage);
await wait(() => {
expect(nextPageMock).toHaveBeenCalled();
});
});
it("goes to last page on last page click", async () => {
const { getByText } = render(<Paginator table={defaultTableInstance} />);
const specificPage = getByText("12");
fireEvent.click(specificPage);
await wait(() => {
expect(gotoPageMock).toHaveBeenCalled();
expect(gotoPageMock.mock.calls[0][0]).toEqual(11);
});
});
it("goes to the specified page on page link click", async () => {
const { getByText } = render(<Paginator table={defaultTableInstance} />);
const lastPage = getByText("Last");
fireEvent.click(lastPage);
await wait(() => {
expect(gotoPageMock).toHaveBeenCalled();
expect(gotoPageMock.mock.calls[0][0]).toEqual(99);
});
});
it("renders the beginning links properly", async () => {
const { queryByText } = render(
<Paginator
table={{
...defaultTableInstance,
state: {
...defaultTableInstance.state,
pageIndex: 1 // this is page `2` when 1-indexed
}
}}
/>
);
[1, 2, 3, 4].forEach(num => {
expect(queryByText(num.toString())).toBeInTheDocument();
});
[0, 5].forEach(num => {
expect(queryByText(num.toString())).not.toBeInTheDocument();
});
});
it("renders the ending links properly", async () => {
const { queryByText } = render(
<Paginator
table={{
...defaultTableInstance,
state: {
...defaultTableInstance.state,
pageIndex: 98 // this is page `99` 1-indexed
}
}}
/>
);
[97, 98, 99, 100].forEach(num => {
expect(queryByText(num.toString())).toBeInTheDocument();
});
[96, 101].forEach(num => {
expect(queryByText(num.toString())).not.toBeInTheDocument();
});
});
it("renders the middle links properly", async () => {
const { queryByText } = render(
<Paginator
table={{
...defaultTableInstance,
state: {
...defaultTableInstance.state,
pageIndex: 41 // this is page `42` 1-indexed
}
}}
/>
);
[40, 41, 42, 43, 44].forEach(num => {
expect(queryByText(num.toString())).toBeInTheDocument();
});
[39, 45].forEach(num => {
expect(queryByText(num.toString())).not.toBeInTheDocument();
});
});
});
Example #7
| Source File: Table.tsx From frontegg-react with MIT License | 4 votes |
|
Table: FC<TableProps> = <T extends object>(props: TableProps<T>) => {
const classes = useStyles();
const tableRef = useRef<HTMLTableElement>(null);
const firstRender = useRef<boolean>(true);
const columns = useMemo(() => {
const columns = props.columns.map(
({ sortable, Filter, Header, ...rest }) =>
({
...rest,
disableSortBy: !sortable,
disableFilters: !Filter,
Filter,
Header: Header ?? <div style={{ minWidth: rest.minWidth, maxWidth: rest.maxWidth }} />,
} as FeTableColumnOptions<T>)
);
if (props.expandable) {
columns.unshift({
id: 'fe-expander',
minWidth: 60,
maxWidth: '60px' as any,
Header: <div style={{ minWidth: '1.5rem', maxWidth: '1.5rem' }} />,
Cell: (cell: Cell<T>) => {
const row = cell.row as Row<T> & UseExpandedRowProps<T>;
return (
<IconButton className={classes.expandIcon} {...row.getToggleRowExpandedProps()}>
{row.isExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
);
},
});
}
if (props.selection) {
columns.unshift({
id: 'fe-selection',
minWidth: 60,
maxWidth: '60px' as any,
Cell: (cell: Cell<T>) => {
const row = cell.row as Row<T> & UseRowSelectRowProps<T>;
return (
<Checkbox
className={classes.checkBox}
{...row.getToggleRowSelectedProps()}
checked={row.isSelected}
onChange={(e) => onRowSelected(row.original, e.target.checked)}
/>
);
},
});
}
return columns as Column<T>[];
}, [props.columns, props.expandable]);
const tableHooks: PluginHook<T>[] = [useFilters, useSortBy];
if (props.expandable) {
tableHooks.push(useExpanded);
}
if (props.pagination) {
tableHooks.push(usePagination);
}
if (props.selection) {
tableHooks.push(useRowSelect);
}
tableHooks.push(useFlexLayout);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
// The page controls ;)
page,
// canPreviousPage,
// canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
// setPageSize,
// select props
toggleAllRowsSelected,
isAllRowsSelected,
selectedFlatRows,
toggleRowSelected,
} = useTable(
{
columns,
data: props.data,
getRowId: (row: any) => row[props.rowKey],
manualSortBy: !!props.onSortChange,
manualFilters: !!props.onFilterChange,
manualPagination: !!props.onPageChange,
manualRowSelectedKey: props.rowKey,
pageCount: !!props.onPageChange ? props.pageCount : undefined,
autoResetPage: !props.onPageChange,
useControlledState: (state1: any) => {
return {
...state1,
sortBy: props.sortBy ?? state1.sortBy,
filters: props.filters ?? state1.filters,
selectedRowIds: props.selectedRowIds ?? state1.selectedRowIds,
} as TableState<T> & UseFiltersState<T> & UseSortByState<T> & UseRowSelectState<T>;
},
expandSubRows: false,
initialState: {
pageIndex: 0,
pageSize: props.pageSize ?? 0,
selectedRowIds: props.selectedRowIds || {},
},
} as UseTableOptions<T> &
UseFiltersOptions<T> &
UseSortByOptions<T> &
UseExpandedOptions<T> &
UseRowSelectOptions<T> &
UsePaginationOptions<T>,
...tableHooks
) as TableInstance<T> & UseTableInstanceProps<T> & UsePaginationInstanceProps<T> & UseRowSelectInstanceProps<T>;
if (props.expandable && !props.renderExpandedComponent) {
throw Error('FeTable: you must provide renderExpandedComponent property if the table is expandable');
}
if (props.hasOwnProperty('sortBy') && !props.onSortChange) {
throw Error('FeTable: you must provide onSortChange property if sortBy is controlled');
}
if (props.hasOwnProperty('filters') && !props.onFilterChange) {
throw Error('FeTable: you must provide onFilterChange property if filters is controlled');
}
if (props.hasOwnProperty('pagination') && !props.pageSize) {
throw Error('FeTable: you must provide pageSize property if pagination enabled');
}
if (props.hasOwnProperty('onPageChange') && !props.pageCount) {
throw Error('FeTable: you must provide pageCount property if onPageChange is controlled');
}
const tableState = state as UseSortByState<T> & UseFiltersState<T> & UsePaginationState<T> & UseRowSelectState<T>;
const onSortChange = useCallback(
(column: FeTableColumnProps<T>) => {
if (props.hasOwnProperty('sortBy')) {
const sortBy = props.isMultiSort ? tableState.sortBy.filter(({ id }) => id !== column.id) : [];
if (!column.isSorted) {
sortBy.push({ id: column.id, desc: false });
} else if (!column.isSortedDesc) {
sortBy.push({ id: column.id, desc: true });
}
props.onSortChange?.(sortBy);
} else {
if (column.isSorted && column.isSortedDesc) {
column.clearSortBy();
} else {
column.toggleSortBy(column.isSorted, props.isMultiSort ?? false);
}
}
},
[props.onSortChange]
);
const onFilterChange = useCallback(
(column: FeTableColumnProps<T>, filterValue?: any) => {
if (props.hasOwnProperty('filters')) {
const filters = tableState.filters.filter(({ id }) => id !== column.id);
if (filterValue != null) {
filters.push({ id: column.id, value: filterValue });
}
props.onFilterChange?.(filters);
} else {
column.setFilter(filterValue);
}
},
[props.onFilterChange, tableState]
);
const onToggleAllRowsSelected = useCallback(
(value: boolean) => {
if (props.hasOwnProperty('selectedRowIds')) {
const selectedIds = props.data.reduce((p, n: any) => ({ ...p, [n[props.rowKey]]: true }), {});
props.onRowSelected?.(value ? selectedIds : {});
} else {
toggleAllRowsSelected(value);
}
},
[props.onRowSelected]
);
const onRowSelected = useCallback(
(row: any, value: boolean) => {
const id = row[props.rowKey];
if (props.hasOwnProperty('selectedRowIds')) {
const newSelectedRows: any = { ...props.selectedRowIds };
if (value) {
newSelectedRows[id] = true;
} else {
delete newSelectedRows[id];
}
props.onRowSelected?.(newSelectedRows);
} else {
toggleRowSelected(id, value);
}
},
[props.onRowSelected]
);
const handleOnPageChange = useCallback(() => {
if (pagination === 'pages') {
tableRef.current?.scroll?.({ top: 0, left: 0, behavior: 'smooth' });
}
props.onPageChange?.(tableState.pageSize, tableState.pageIndex);
}, [tableState.pageIndex]);
useEffect(() => {
!props.hasOwnProperty('sortBy') && props.onSortChange?.(tableState.sortBy);
}, [props.sortBy, tableState.sortBy]);
useEffect(() => {
!props.hasOwnProperty('filters') && props.onFilterChange?.(tableState.filters);
}, [props.filters, tableState.filters]);
useEffect(() => {
firstRender.current ? (firstRender.current = false) : handleOnPageChange();
}, [tableState.pageIndex]);
useEffect(() => {
!props.hasOwnProperty('selectedRowIds') && props.onRowSelected?.(tableState.selectedRowIds as any);
}, [tableState.selectedRowIds]);
const onPageChangeHandler = (page: number) => {
if (page > tableState.pageIndex) {
nextPage();
} else {
previousPage();
}
};
const { className, loading, pagination, totalData, pageSize } = props;
return (
<Paper ref={tableRef} className={classes.paper}>
<MaUTable className={classNames(classes.table, className)} {...getTableProps()}>
<TableHead
headerGroups={headerGroups}
onSortChange={onSortChange}
onFilterChange={onFilterChange}
toggleAllRowsSelected={onToggleAllRowsSelected}
isAllRowsSelected={isAllRowsSelected}
selectedFlatRows={selectedFlatRows}
/>
<TableBody
pageSize={pageSize}
pagination={pagination}
getTableBodyProps={getTableBodyProps}
prepareRow={prepareRow}
loading={loading}
rows={(pagination ? page : rows) as (Row<T> & UseExpandedRowProps<T>)[]}
renderExpandedComponent={props.renderExpandedComponent}
onInfiniteScroll={handleOnPageChange}
/>
</MaUTable>
{loading && pagination === 'pages' && rows.length > 0 && <Loader center size={24} />}
{pagination === 'pages' && (
<TablePagination
className={classes.footer}
rowsPerPageOptions={[]}
component='div'
count={totalData || rows.length}
rowsPerPage={tableState.pageSize}
page={tableState.pageIndex}
onChangePage={(e, page) => onPageChangeHandler(page)}
ActionsComponent={(props) => (
<TablePaginationActions {...props} gotoPage={gotoPage} pageOptions={pageOptions} />
)}
/>
)}
</Paper>
);
}
Example #8
| Source File: Table.tsx From opensaas with MIT License | 4 votes |
|
Table: React.FC<TableProps> = <T extends object>(props: TableProps<T>) => {
const {
expandable,
selection,
pagination,
sortBy,
pageCount,
data,
selectedRowIds,
pageSize,
rowKey,
loading,
isMultiSort,
renderExpandedComponent,
onPageChange,
filters: propsFilters,
onSortChange: propsOnSortChange,
onRowSelected: propsOnRowSelected,
onFilterChange: propsOnFilterChange,
columns: propsColumns,
} = props;
const classes = useStyles();
const tableRef = useRef<HTMLTableElement>(null);
const hasSortBy = props.hasOwnProperty('sortBy');
const hasFilters = props.hasOwnProperty('filters');
const hasPagination = props.hasOwnProperty('pagination');
const hasOnPageChange = props.hasOwnProperty('onPageChange');
const hasSelectedRowIds = props.hasOwnProperty('selectedRowIds');
const onRowSelected = useCallback(
(row: UseRowSelectRowProps<T> & Row<T> & UseTableRowProps<T>, value: boolean) => {
const id = (row.original as any)[rowKey];
if (hasSelectedRowIds) {
const newSelectedRows: any = { ...selectedRowIds };
if (value) {
newSelectedRows[id] = true;
} else {
delete newSelectedRows[id];
}
propsOnRowSelected?.(newSelectedRows);
} else {
row.toggleRowSelected(value);
}
},
[hasSelectedRowIds, rowKey, selectedRowIds, propsOnRowSelected],
);
const columns = useMemo(() => {
const columns = propsColumns.map(
({ sortable, Filter, Header, ...rest }) =>
({
...rest,
disableSortBy: !sortable,
disableFilters: !Filter,
Filter,
Header: Header ?? <div style={{ minWidth: rest.minWidth, maxWidth: rest.maxWidth }} />,
} as TableColumnOptions<T>),
);
if (expandable) {
columns.unshift({
id: 'expander',
minWidth: 60,
maxWidth: '60px' as any,
Cell: (cell: UseTableCellProps<T>) => {
const row = cell.row as Row<T> & UseExpandedRowProps<T>;
return (
<IconButton className={classes.expandIcon} {...row.getToggleRowExpandedProps()}>
{row.isExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
);
},
});
}
if (selection) {
columns.unshift({
id: 'selection',
minWidth: 60,
maxWidth: '60px' as any,
Cell: (cell: UseTableCellProps<T>) => {
const row = cell.row as UseRowSelectRowProps<T> & Row<T> & UseTableRowProps<T>;
return (
<Checkbox
className={classes.checkBox}
{...row.getToggleRowSelectedProps()}
checked={row.isSelected}
onChange={(e) => onRowSelected(row, e.target.checked)}
/>
);
},
});
}
return columns as Column<T>[];
}, [propsColumns, expandable, classes, selection, onRowSelected]);
const tableHooks: PluginHook<T>[] = [useFilters, useSortBy];
if (expandable) {
tableHooks.push(useExpanded);
}
if (pagination) {
tableHooks.push(usePagination);
}
if (selection) {
tableHooks.push(useRowSelect);
}
tableHooks.push(useFlexLayout);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
page,
pageOptions,
gotoPage,
nextPage,
previousPage,
toggleAllRowsSelected,
isAllRowsSelected,
selectedFlatRows,
} = useTable(
{
columns,
data,
getRowId: (row: any) => row[rowKey],
manualSortBy: !!propsOnSortChange,
manualFilters: !!propsOnFilterChange,
manualPagination: !!onPageChange,
manualRowSelectedKey: rowKey,
pageCount: pageCount ?? 0,
useControlledState: (state1: any) =>
({
...state1,
sortBy: sortBy ?? state1.sortBy,
filters: propsFilters ?? state1.filters,
selectedRowIds: selectedRowIds ?? state1.selectedRowIds,
} as TableState<T> & UseFiltersState<T> & UseSortByState<T> & UseRowSelectState<T>),
expandSubRows: false,
initialState: {
pageIndex: 0,
pageSize: pageSize ?? 0,
selectedRowIds: selectedRowIds || {},
},
} as UseTableOptions<T> &
UseFiltersOptions<T> &
UseSortByOptions<T> &
UseExpandedOptions<T> &
UseRowSelectOptions<T> &
UsePaginationOptions<T>,
...tableHooks,
) as TableInstance<T> & UseTableInstanceProps<T> & UsePaginationInstanceProps<T> & UseRowSelectInstanceProps<T>;
if (expandable && !renderExpandedComponent) {
throw Error('Table: you must provide renderExpandedComponent property if the table is expandable');
}
if (hasSortBy && !propsOnSortChange) {
throw Error('Table: you must provide onSortChange property if sortBy is controlled');
}
if (hasFilters && !propsOnFilterChange) {
throw Error('Table: you must provide onFilterChange property if filters is controlled');
}
if (hasPagination && !pageSize) {
throw Error('Table: you must provide pageSize property if pagination enabled');
}
if (hasOnPageChange && !pageCount) {
throw Error('Table: you must provide pageCount property if onPageChange is controlled');
}
const tableState = state as UseSortByState<T> & UseFiltersState<T> & UsePaginationState<T> & UseRowSelectState<T>;
const onSortChange = useCallback(
(column: TableColumnProps<T>) => {
if (hasSortBy) {
const sortBy = isMultiSort ? tableState.sortBy.filter(({ id }) => id !== column.id) : [];
if (!column.isSorted) {
sortBy.push({ id: column.id, desc: false });
} else if (!column.isSortedDesc) {
sortBy.push({ id: column.id, desc: true });
}
propsOnSortChange?.(sortBy);
} else {
if (column.isSorted && column.isSortedDesc) {
column.clearSortBy();
} else {
column.toggleSortBy(column.isSorted, isMultiSort ?? false);
}
}
},
[hasSortBy, isMultiSort, tableState.sortBy, propsOnSortChange],
);
const onFilterChange = useCallback(
(column: TableColumnProps<T>, filterValue?: any) => {
if (hasFilters) {
const filters = tableState.filters.filter(({ id }) => id !== column.id);
if (filterValue != null) {
filters.push({ id: column.id, value: filterValue });
}
propsOnFilterChange?.(filters);
} else {
column.setFilter(filterValue);
}
},
[propsOnFilterChange, hasFilters, tableState.filters],
);
const onToggleAllRowsSelected = useCallback(
(value: boolean) => {
if (hasSelectedRowIds) {
const selectedIds = data.reduce((p, n: any) => ({ ...p, [n[rowKey]]: true }), {});
propsOnRowSelected?.(value ? selectedIds : {});
} else {
toggleAllRowsSelected(value);
}
},
[hasSelectedRowIds, data, rowKey, propsOnRowSelected, toggleAllRowsSelected],
);
useEffect(() => {
if (!hasSortBy) propsOnSortChange?.(tableState.sortBy);
}, [hasSortBy, propsOnSortChange, tableState.sortBy]);
useEffect(() => {
if (!hasFilters) propsOnFilterChange?.(tableState.filters);
}, [hasFilters, propsOnFilterChange, tableState.filters]);
useEffect(() => {
tableRef.current?.querySelector('.table-tbody')?.scroll?.({ top: 0, left: 0, behavior: 'smooth' });
onPageChange?.(tableState.pageSize, tableState.pageIndex);
}, [onPageChange, tableState.pageSize, tableState.pageIndex]);
useEffect(() => {
if (!hasSelectedRowIds) propsOnRowSelected?.(tableState.selectedRowIds as any);
}, [hasSelectedRowIds, propsOnRowSelected, tableState.selectedRowIds]);
const onPageChangeHandler = (page: number) => {
if (page > tableState.pageIndex) {
nextPage();
} else {
previousPage();
}
};
return (
<Paper className={classes.paper}>
<MaterialUITable className={classes.table} ref={tableRef} {...getTableProps()}>
<TableHead
headerGroups={headerGroups}
onSortChange={onSortChange}
onFilterChange={onFilterChange}
toggleAllRowsSelected={onToggleAllRowsSelected}
isAllRowsSelected={isAllRowsSelected}
selectedFlatRows={selectedFlatRows}
/>
<TableBody
getTableBodyProps={getTableBodyProps}
prepareRow={prepareRow}
loading={loading}
rows={(pagination ? page : rows) as (Row<T> & UseExpandedRowProps<T>)[]}
renderExpandedComponent={renderExpandedComponent}
/>
</MaterialUITable>
{pagination === 'pages' && (
<TablePagination
className={classes.footer}
rowsPerPageOptions={[]}
component='div'
count={rows.length}
rowsPerPage={tableState.pageSize}
page={tableState.pageIndex}
onChangePage={(e, page) => onPageChangeHandler(page)}
ActionsComponent={(props) => (
<TablePaginationActions {...props} gotoPage={gotoPage} pageOptions={pageOptions} />
)}
/>
)}
</Paper>
);
}
Example #9
| Source File: Grouping.tsx From viewer-components-react with MIT License | 4 votes |
|
Groupings = ({ mapping, goBack }: GroupsTreeProps) => {
const iModelConnection = useActiveIModelConnection() as IModelConnection;
const apiContext = useContext(ApiContext);
const iModelId = useActiveIModelConnection()?.iModelId as string;
const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [groupsView, setGroupsView] = useState<GroupsView>(GroupsView.GROUPS);
const [selectedGroup, setSelectedGroup] = useState<GroupType | undefined>(
undefined,
);
const hilitedElements = useRef<Map<string, string[]>>(new Map());
const [selectedRows, setSelectedRows] = useState<Record<string, boolean>>({});
const [isLoadingQuery, setLoadingQuery] = useState<boolean>(false);
const [groups, setGroups] = useState<Group[]>([]);
useEffect(() => {
void fetchGroups(setGroups, iModelId, mapping.id ?? "", setIsLoading, apiContext);
}, [apiContext, iModelId, mapping.id, setIsLoading]);
const refresh = useCallback(async () => {
setGroupsView(GroupsView.GROUPS);
setSelectedGroup(undefined);
setGroups([]);
await fetchGroups(setGroups, iModelId, mapping.id ?? "", setIsLoading, apiContext);
}, [apiContext, iModelId, mapping.id, setGroups]);
const addGroup = () => {
// TODO Retain selection in view without emphasizes. Goal is to make it so we can distinguish
// hilited elements from regular elements without emphasis due to it blocking selection. For now clearing
// selection.
clearEmphasizedElements();
setGroupsView(GroupsView.ADD);
};
const onModify = useCallback((value) => {
clearEmphasizedElements();
setSelectedGroup(value.row.original);
setGroupsView(GroupsView.MODIFYING);
}, []);
const openProperties = useCallback((value) => {
clearEmphasizedElements();
setSelectedGroup(value.row.original);
setGroupsView(GroupsView.PROPERTIES);
}, []);
const groupsColumns = useMemo(
() => [
{
Header: "Table",
columns: [
{
id: "groupName",
Header: "Group",
accessor: "groupName",
Cell: (value: CellProps<GroupType>) => (
<>
{isLoadingQuery ? (
value.row.original.groupName
) : (
<div
className='iui-anchor'
onClick={(e) => {
e.stopPropagation();
openProperties(value);
}}
>
{value.row.original.groupName}
</div>
)}
</>
),
},
{
id: "description",
Header: "Description",
accessor: "description",
},
{
id: "dropdown",
Header: "",
width: 80,
Cell: (value: CellProps<GroupType>) => {
return (
<div onClick={(e) => e.stopPropagation()}>
<DropdownMenu
disabled={isLoadingQuery}
menuItems={(close: () => void) => [
<MenuItem
key={0}
onClick={() => onModify(value)}
icon={<SvgEdit />}
>
Modify
</MenuItem>,
<MenuItem
key={1}
onClick={() => openProperties(value)}
icon={<SvgList />}
>
Properties
</MenuItem>,
<MenuItem
key={2}
onClick={() => {
setSelectedGroup(value.row.original);
setShowDeleteModal(true);
close();
}}
icon={<SvgDelete />}
>
Remove
</MenuItem>,
]}
>
<IconButton
disabled={isLoadingQuery}
styleType='borderless'
>
<SvgMore
style={{
width: "16px",
height: "16px",
}}
/>
</IconButton>
</DropdownMenu>
</div>
);
},
},
],
},
],
[isLoadingQuery, onModify, openProperties],
);
// Temp
const stringToColor = function (str: string) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let colour = "#";
for (let i = 0; i < 3; i++) {
const value = (hash >> (i * 8)) & 0xff;
colour += (`00${value.toString(16)}`).substr(-2);
}
return colour;
};
const onSelect = useCallback(
async (selectedData: GroupType[] | undefined) => {
clearEmphasizedElements();
if (selectedData && selectedData.length > 0) {
setLoadingQuery(true);
let allIds: string[] = [];
for (const row of selectedData) {
const query = row.query ?? "";
if (hilitedElements.current.has(query)) {
const hilitedIds = hilitedElements.current.get(query) ?? [];
visualizeElements(hilitedIds, stringToColor(row.id ?? ""));
allIds = allIds.concat(hilitedIds);
} else {
try {
const ids: string[] = await fetchIdsFromQuery(
query,
iModelConnection,
);
if (ids.length === 0) {
toaster.warning(`${row.groupName}'s query is valid but produced no results.`);
}
const hiliteIds = await visualizeElementsById(
ids,
stringToColor(row.id ?? ""),
iModelConnection,
);
hilitedElements.current.set(query, hiliteIds);
allIds = allIds.concat(ids);
} catch {
const index = groups.findIndex((group) => group.id === row.id);
setSelectedRows((rowIds) => {
const selectedRowIds = { ...rowIds };
delete selectedRowIds[index];
return selectedRowIds;
});
toaster.negative(`Could not load ${row.groupName}. Query could not be resolved.`);
}
}
}
await zoomToElements(allIds);
setLoadingQuery(false);
}
},
[iModelConnection, groups],
);
const controlledState = useCallback(
(state) => {
return {
...state,
selectedRowIds: { ...selectedRows },
};
},
[selectedRows],
);
const propertyMenuGoBack = useCallback(async () => {
clearEmphasizedElements();
setGroupsView(GroupsView.GROUPS);
await refresh();
}, [refresh]);
const tableStateReducer = (
newState: TableState,
action: ActionType,
_previousState: TableState,
instance?: TableInstance,
): TableState => {
switch (action.type) {
case actions.toggleRowSelected: {
const newSelectedRows = {
...selectedRows,
};
if (action.value) {
newSelectedRows[action.id] = true;
} else {
delete newSelectedRows[action.id];
}
setSelectedRows(newSelectedRows);
newState.selectedRowIds = newSelectedRows;
break;
}
case actions.toggleAllRowsSelected: {
if (!instance?.rowsById) {
break;
}
const newSelectedRows = {} as Record<string, boolean>;
if (action.value) {
Object.keys(instance.rowsById).forEach(
(id) => (newSelectedRows[id] = true),
);
}
setSelectedRows(newSelectedRows);
newState.selectedRowIds = newSelectedRows;
break;
}
default:
break;
}
return newState;
};
switch (groupsView) {
case GroupsView.ADD:
return (
<GroupAction
iModelId={iModelId}
mappingId={mapping.id ?? ""}
goBack={async () => {
clearEmphasizedElements();
setGroupsView(GroupsView.GROUPS);
await refresh();
}}
/>
);
case GroupsView.MODIFYING:
return selectedGroup ? (
<GroupAction
iModelId={iModelId}
mappingId={mapping.id ?? ""}
group={selectedGroup}
goBack={async () => {
clearEmphasizedElements();
setGroupsView(GroupsView.GROUPS);
await refresh();
}}
/>
) : null;
case GroupsView.PROPERTIES:
return selectedGroup ? (
<PropertyMenu
iModelId={iModelId}
mappingId={mapping.id ?? ""}
group={selectedGroup}
goBack={propertyMenuGoBack}
/>
) : null;
default:
return (
<>
<WidgetHeader
title={mapping.mappingName ?? ""}
disabled={isLoading || isLoadingQuery}
returnFn={async () => {
clearEmphasizedElements();
await goBack();
}}
/>
<div className='groups-container'>
<Button
startIcon={
isLoadingQuery ? <ProgressRadial size="small" indeterminate /> : <SvgAdd />
}
styleType='high-visibility'
disabled={isLoadingQuery}
onClick={() => addGroup()}
>
{isLoadingQuery ? "Loading Group(s)" : "Add Group"}
</Button>
<Table<GroupType>
data={groups}
density='extra-condensed'
columns={groupsColumns}
emptyTableContent='No Groups available.'
isSortable
isSelectable
onSelect={onSelect}
isLoading={isLoading}
isRowDisabled={() => isLoadingQuery}
stateReducer={tableStateReducer}
useControlledState={controlledState}
/>
</div>
<DeleteModal
entityName={selectedGroup?.groupName ?? ""}
show={showDeleteModal}
setShow={setShowDeleteModal}
onDelete={async () => {
const reportingClientApi = new ReportingClient(apiContext.prefix);
await reportingClientApi.deleteGroup(
apiContext.accessToken,
iModelId,
mapping.id ?? "",
selectedGroup?.id ?? "",
);
}}
refresh={refresh}
/>
</>
);
}
}
Example #10
| Source File: ValidationTableWidget.tsx From frontend-sample-showcase with MIT License | 4 votes |
|
ValidationTableWidget: React.FunctionComponent = () => {
const iModelConnection = useActiveIModelConnection();
const [validationResults, setValidationResults] = React.useState<ValidationResults>();
const [ruleData, setRuleData] = React.useState<Record<string, PropertyValueValidationRule | undefined>>();
const [selectedElement, setSelectedElement] = useState<string | undefined>();
useEffect(() => {
const removeDataListener = ValidationApi.onValidationDataChanged.addListener((dat) => {
setValidationResults(dat.validationData);
setRuleData(dat.ruleData);
});
const removeElementListener = ValidationApi.onMarkerClicked.addListener((elementId) => {
setSelectedElement(elementId);
});
if (iModelConnection) {
ValidationApi.getValidationData(iModelConnection.iTwinId!).catch((error) => {
// eslint-disable-next-line no-console
console.error(error);
});
}
return () => {
removeDataListener();
removeElementListener();
};
}, [iModelConnection]);
const columnDefinition = useMemo((): Column<TableRow>[] => [
{
Header: "Table",
columns: [
{
Header: "Element Id",
accessor: "elementId",
},
{
Header: "Element Label",
accessor: "elementLabel",
},
{
Header: "Rule Name",
accessor: "ruleName",
},
{
Header: "Legal Range",
accessor: "legalValues",
},
{
Header: "Invalid Value",
accessor: "badValue",
},
],
},
], []);
const data = useMemo(() => {
const rows: TableRow[] = [];
if (validationResults !== undefined && validationResults.result !== undefined && validationResults.ruleList !== undefined && ruleData !== undefined) {
const getLegalValue = (item: any) => {
const currentRuleData = ruleData[validationResults.ruleList[item.ruleIndex].id];
if (!currentRuleData)
return "";
if (currentRuleData.functionParameters.lowerBound) {
if (currentRuleData.functionParameters.upperBound) {
// Range of values
return `[${currentRuleData.functionParameters.lowerBound},${currentRuleData.functionParameters.upperBound}]`;
} else {
// Value has a lower bound
return `>${currentRuleData.functionParameters.lowerBound}`;
}
} else {
// Value needs to be defined
return "Must be Defined";
}
};
validationResults.result.forEach((rowData) => {
const row: TableRow = {
elementId: rowData.elementId,
elementLabel: rowData.elementLabel,
ruleName: validationResults.ruleList[rowData.ruleIndex].displayName,
legalValues: getLegalValue(rowData),
badValue: rowData.badValue,
};
rows.push(row);
});
}
return rows;
}, [validationResults, ruleData]);
const controlledState = useCallback(
(state: TableState<TableRow>, meta: MetaBase<TableRow>) => {
state.selectedRowIds = {};
if (selectedElement) {
const row = meta.instance.rows.find((r: { original: { elementId: string } }) => r.original.elementId === selectedElement);
if (row) {
state.selectedRowIds[row.id] = true;
}
}
return { ...state };
},
[selectedElement],
);
const tableStateReducer = (
newState: TableState<TableRow>,
action: ActionType,
_previousState: TableState<TableRow>,
instance?: TableInstance<TableRow> | undefined,
): TableState<TableRow> => {
switch (action.type) {
case actions.toggleRowSelected: {
newState.selectedRowIds = {};
if (action.value)
newState.selectedRowIds[action.id] = true;
if (instance) {
const elementId = instance.rowsById[action.id].original.elementId;
ValidationApi.visualizeViolation(elementId);
setSelectedElement(elementId);
}
break;
}
default:
break;
}
return newState;
};
return (
<Table<TableRow>
useControlledState={controlledState}
stateReducer={tableStateReducer}
isSelectable={true}
data={data}
columns={columnDefinition}
isLoading={!validationResults}
emptyTableContent="No data"
density="extra-condensed" />
);
}
Example #11
| Source File: customer-groups-table.tsx From admin with MIT License | 4 votes |
|
/*
* Root component of the customer groups table.
*/
function CustomerGroupsTable(props: CustomerGroupsTableProps) {
const { customerGroups, queryObject, count, paginate, setQuery } = props
const tableConfig: TableOptions<CustomerGroup> = {
columns: CUSTOMER_GROUPS_TABLE_COLUMNS,
data: customerGroups || [],
initialState: {
pageSize: queryObject.limit,
pageIndex: queryObject.offset / queryObject.limit,
},
pageCount: Math.ceil(count / queryObject.limit),
manualPagination: true,
autoResetPage: false,
}
const table: TableInstance<CustomerGroup> = useTable(
tableConfig,
useSortBy,
usePagination
)
// ********* HANDLERS *********
const handleNext = () => {
if (!table.canNextPage) {
return
}
paginate(1)
table.nextPage()
}
const handlePrev = () => {
if (!table.canPreviousPage) {
return
}
paginate(-1)
table.previousPage()
}
const handleSearch = (text: string) => {
setQuery(text)
if (text) {
table.gotoPage(0)
}
}
// ********* RENDER *********
return (
<div className="w-full h-full overflow-y-auto flex flex-col justify-between">
<Table
enableSearch
handleSearch={handleSearch}
searchValue={queryObject.q}
{...table.getTableProps()}
>
{/* HEAD */}
<Table.Head>
{table.headerGroups?.map((headerGroup, ind) => (
<CustomerGroupsTableHeaderRow key={ind} headerGroup={headerGroup} />
))}
</Table.Head>
{/* BODY */}
<Table.Body {...table.getTableBodyProps()}>
{table.rows.map((row) => {
table.prepareRow(row)
return (
<CustomerGroupContextContainer key={row.id} group={row.original}>
<CustomerGroupsTableRow row={row} />
</CustomerGroupContextContainer>
)
})}
</Table.Body>
</Table>
{/* PAGINATION */}
<TablePagination
count={count}
limit={queryObject.limit}
offset={queryObject.offset}
pageSize={queryObject.offset + table.rows.length}
title="Customers"
currentPage={table.state.pageIndex + 1}
pageCount={table.pageCount}
nextPage={handleNext}
prevPage={handlePrev}
hasNext={table.canNextPage}
hasPrev={table.canPreviousPage}
/>
</div>
)
}
