eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

refactor: improve code readability by formatting and restructuring useRef and useCallback hooks in EnterpriseDataTable component

Browse Source
This commit is contained in:
Firman Ramdhani
2026-07-23 15:58:08 +07:00
parent 9a8d94cd98
commit 79b291cf74
1 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx
+24 -9
View File
@@ -193,7 +193,8 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
// ---------------------------------------------------------------------------
const { t } = useEnterpriseModuleTranslationContext();
const { dataServices } = useEnterpriseModuleDataServiceContext<E>();
const { selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData } = useEnterpriseModuleSelectionContext<E>();
const { selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData } =
useEnterpriseModuleSelectionContext<E>();
const navigation = useEnterpriseModuleNavigationContext();
const { config } = useEnterpriseModuleConfigContext();
@@ -214,12 +215,14 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
// Search & Filter State
// ---------------------------------------------------------------------------
const searchRef = useRef<string>((filterData?.[searchKey] as string) || '');
const filterRef = useRef<Record<string, any>>((() => {
const filterRef = useRef<Record<string, any>>(
(() => {
if (!filterData) return {};
const copy = { ...filterData };
delete copy[searchKey];
return copy;
})());
})(),
);
const [searchValue, setSearchValue] = useState(searchRef.current);
@@ -227,12 +230,15 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
setSearchValue(e.currentTarget.value);
}, []);
const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
const handleSearchKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
searchRef.current = searchValue;
gridApiRef.current?.refreshServerSide({ purge: true });
}
}, [searchValue]);
},
[searchValue],
);
const handleSearchClear = useCallback(() => {
setSearchValue('');
@@ -248,7 +254,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
const filterKeys = filterConfig?.defaultValues
? Object.keys(filterConfig.defaultValues)
: Object.keys(filterData).filter(
(key) => key !== searchKey && !['page', 'limit', 'order_by', 'order_type'].includes(key)
(key) => key !== searchKey && !['page', 'limit', 'order_by', 'order_type'].includes(key),
);
return filterKeys.filter((key) => {
@@ -680,7 +686,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
try {
const request = params.request;
const limit = perPage
const limit = perPage;
const page = Math.floor((request.startRow ?? 0) / limit) + 1;
// Extract sorting information from the request
@@ -694,7 +700,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
limit,
order_by: orderBy,
order_type: orderType,
...filterRef.current
...filterRef.current,
};
if (searchRef.current) {
@@ -737,9 +743,17 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
if (params.api) {
// Attach the server-side datasource to the grid API
params.api.setGridOption('serverSideDatasource', datasource);
// Synchronously jump to the restored page immediately after attaching the datasource.
// This ensures the grid doesn't reset our page back to 1.
// NOTE: This relies on `serverSideInitialRowCount` being provided so the grid knows
// there are enough pages to jump to!
if (isPaginated && metaData?.page && metaData.page > 1) {
params.api.paginationGoToPage(metaData.page - 1);
}
}
},
[datasource, setSelectedRows],
[datasource, setSelectedRows, isPaginated, metaData],
);
// Triggered whenever the row selection in the grid changes
@@ -851,6 +865,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
pagination={isPaginated}
paginationPageSize={isPaginated ? perPage : undefined}
paginationPageSizeSelector={isPaginated ? [10, 15, 20, 50] : undefined}
serverSideInitialRowCount={metaData?.total ?? undefined}
columnDefs={finalColumnDefs}
defaultColDef={defaultColDef}
animateRows={true}