EccTable
EccTable is a table with search, paging, sorting and reload, based on AG Grid. The task list and the list of drafts are built on it.
import EccTable from "@/ecc/components/forms/EccGrid";
<EccTable<EccProcess>
dataFetcher={(page, size, query) => fetchProcessList("purchase", page, size, query)}
columnDefs={columnDefs}
onRowEvent={(row) => setSelected(row)}
getRowId={(row) => row.processInstanceId ?? ""}
selectedRowId={selected?.processInstanceId}
pageSize={20}
onReloadRef={(fn) => { reload.current = fn; }}
/>
Objects in this example: EccProcess.
Props
| returns |
| AG Grid column definitions |
| own toolbar, receives |
| a row was clicked |
| name of the row event |
| keep the selection across reloads |
| rows per page |
| prefix for the texts of the table |
| sorting is done by the |
| gives you a function to reload from outside |
Highlighting the search text
import { useEccGridSearch, highlightText } from "@/ecc/components/forms/EccGrid";
const TitleCell: React.FC<ICellRendererParams<EccProcess>> = ({ data }) => {
const query = useEccGridSearch();
return <span>{highlightText(String(getJsonValue(data, "variables.purchase.title") ?? ""), query)}</span>;
};
highlightText marks the search text from three characters on. getJsonValue is described in Hooks and Utilities.
Related
sub widgets built on EccTable | |
a case list of your app |
On this page
- EccTable