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

This commit is contained in:
Firman Ramdhani
2026-07-23 15:58:08 +07:00
parent 9a8d94cd98
commit 79b291cf74
@@ -193,7 +193,8 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
const { t } = useEnterpriseModuleTranslationContext(); const { t } = useEnterpriseModuleTranslationContext();
const { dataServices } = useEnterpriseModuleDataServiceContext<E>(); 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 navigation = useEnterpriseModuleNavigationContext();
const { config } = useEnterpriseModuleConfigContext(); const { config } = useEnterpriseModuleConfigContext();
@@ -214,12 +215,14 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
// Search & Filter State // Search & Filter State
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
const searchRef = useRef<string>((filterData?.[searchKey] as string) || ''); 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 }; if (!filterData) return {};
delete copy[searchKey]; const copy = { ...filterData };
return copy; delete copy[searchKey];
})()); return copy;
})(),
);
const [searchValue, setSearchValue] = useState(searchRef.current); const [searchValue, setSearchValue] = useState(searchRef.current);
@@ -227,12 +230,15 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
setSearchValue(e.currentTarget.value); setSearchValue(e.currentTarget.value);
}, []); }, []);
const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => { const handleSearchKeyDown = useCallback(
if (e.key === 'Enter') { (e: React.KeyboardEvent<HTMLInputElement>) => {
searchRef.current = searchValue; if (e.key === 'Enter') {
gridApiRef.current?.refreshServerSide({ purge: true }); searchRef.current = searchValue;
} gridApiRef.current?.refreshServerSide({ purge: true });
}, [searchValue]); }
},
[searchValue],
);
const handleSearchClear = useCallback(() => { const handleSearchClear = useCallback(() => {
setSearchValue(''); setSearchValue('');
@@ -248,7 +254,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
const filterKeys = filterConfig?.defaultValues const filterKeys = filterConfig?.defaultValues
? Object.keys(filterConfig.defaultValues) ? Object.keys(filterConfig.defaultValues)
: Object.keys(filterData).filter( : 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) => { return filterKeys.filter((key) => {
@@ -680,7 +686,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
try { try {
const request = params.request; const request = params.request;
const limit = perPage const limit = perPage;
const page = Math.floor((request.startRow ?? 0) / limit) + 1; const page = Math.floor((request.startRow ?? 0) / limit) + 1;
// Extract sorting information from the request // Extract sorting information from the request
@@ -694,7 +700,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
limit, limit,
order_by: orderBy, order_by: orderBy,
order_type: orderType, order_type: orderType,
...filterRef.current ...filterRef.current,
}; };
if (searchRef.current) { if (searchRef.current) {
@@ -737,9 +743,17 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
if (params.api) { if (params.api) {
// Attach the server-side datasource to the grid API // Attach the server-side datasource to the grid API
params.api.setGridOption('serverSideDatasource', datasource); 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 // Triggered whenever the row selection in the grid changes
@@ -851,6 +865,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
pagination={isPaginated} pagination={isPaginated}
paginationPageSize={isPaginated ? perPage : undefined} paginationPageSize={isPaginated ? perPage : undefined}
paginationPageSizeSelector={isPaginated ? [10, 15, 20, 50] : undefined} paginationPageSizeSelector={isPaginated ? [10, 15, 20, 50] : undefined}
serverSideInitialRowCount={metaData?.total ?? undefined}
columnDefs={finalColumnDefs} columnDefs={finalColumnDefs}
defaultColDef={defaultColDef} defaultColDef={defaultColDef}
animateRows={true} animateRows={true}