yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct initial state values and improve pagination handling in TableList component

Browse Source
This commit is contained in:
vinix
2025-10-20 15:41:16 +07:00
parent d2c755c03d
commit 6a9bbb2b5e
1 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Global/TableList.jsx
View File

@@ -34,9 +34,9 @@ const TableList = memo(function TableList({
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [pagingResponse, setPagingResponse] = useState({ const [pagingResponse, setPagingResponse] = useState({
totalData: '', totalData: 0,
perPage: '', perPage: 0,
totalPage: '', totalPage: 0,
}); });
const [pagination, setPagination] = useState({ const [pagination, setPagination] = useState({
@@ -62,30 +62,38 @@ const TableList = memo(function TableList({
}; };
const param = new URLSearchParams({ ...paging, ...queryParams }); const param = new URLSearchParams({ ...paging, ...queryParams });
const resData = await getData(param); const resData = await getData(param);
if (resData) { if (resData) {
setTimeout(() => { setTimeout(() => {
setGridLoading(false); setGridLoading(false);
}, 900); }, 900);
} else {
setGridLoading(false);
return;
} }
setData(resData.data.data ?? []); const dataToSet = resData.data?.data ?? resData.data ?? [];
setFilterData(resData.data.data ?? []); setData(dataToSet);
setFilterData(dataToSet);
if (resData.status == 200) { if (resData.status == 200) {
setPagingResponse({ const pagingData = resData.data?.paging;
totalData: resData.paging.total_limit,
perPage: resData.paging.page_total,
totalPage: resData.paging.total_page,
});
setPagination((prev) => ({ if (pagingData) {
...prev, setPagingResponse({
current: resData.paging.current_page, totalData: pagingData.total || 0,
limit: resData.paging.current_limit, perPage: pagingData.limit || 0,
total: resData.paging.total_limit, totalPage: pagingData.page_total || 0,
})); });
setPagination((prev) => ({
...prev,
current: pagingData.page || 1,
limit: pagingData.limit || 10,
total: pagingData.total || 0,
}));
}
} }
}; };
@@ -93,7 +101,7 @@ const TableList = memo(function TableList({
setPagination((prev) => ({ setPagination((prev) => ({
...prev, ...prev,
current: page, current: page,
pageSize, limit: pageSize,
})); }));
filter(page, pageSize); filter(page, pageSize);
}; };
@@ -138,7 +146,7 @@ const TableList = memo(function TableList({
<Row justify="space-between" align="middle"> <Row justify="space-between" align="middle">
<Col> <Col>
<div> <div>
Menampilkan {pagingResponse.totalPage} Data dari {pagingResponse.perPage}{' '} Menampilkan {pagingResponse.totalData} Data dari {pagingResponse.totalPage}{' '}
Halaman Halaman
</div> </div>
</Col> </Col>
@@ -148,7 +156,7 @@ const TableList = memo(function TableList({
onChange={handlePaginationChange} onChange={handlePaginationChange}
onShowSizeChange={handlePaginationChange} onShowSizeChange={handlePaginationChange}
current={pagination.current} current={pagination.current}
pageSize={pagination.pageSize} pageSize={pagination.limit}
total={pagination.total} total={pagination.total}
/> />
</Col> </Col>