components#SelectFilterControls TypeScript Examples
The following examples show how to use
components#SelectFilterControls.
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: 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 #2
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>
);
}