Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-22 16:38:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

table page index undefined and pagination button ui issues

Browse source
This commit is contained in:
Kartik Gupta 2024-11-11 11:25:24 +05:30
parent 4d08a8e53a
commit 5db25cf0cd
4 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/AppBuilder/Widgets/Table/Pagination.jsx
View file

@ -67,7 +67,7 @@ export const Pagination = function Pagination({
{!serverSide && tableWidth > 460 && (
<ButtonSolid
variant="ghostBlack"
className="tj-text-xsm"
className="tj-text-xsm table-pagination-btn"
style={{
minWidth: '28px',
width: '28px',
@ -92,7 +92,7 @@ export const Pagination = function Pagination({
)}
<ButtonSolid
variant="ghostBlack"
className="tj-text-xsm"
className="tj-text-xsm table-pagination-btn"
style={{
minWidth: '28px',
width: '28px',
@ -144,7 +144,7 @@ export const Pagination = function Pagination({
<div className="d-flex">
<ButtonSolid
variant="ghostBlack"
className="tj-text-xsm"
className="tj-text-xsm table-pagination-btn"
style={{
minWidth: '28px',
width: '28px',
@ -169,7 +169,7 @@ export const Pagination = function Pagination({
{!serverSide && tableWidth > 460 && (
<ButtonSolid
variant="ghostBlack"
className="tj-text-xsm"
className="tj-text-xsm table-pagination-btn"
style={{
minWidth: '28px',
width: '28px',

18
frontend/src/AppBuilder/Widgets/Table/Table.jsx
View file

@ -579,7 +579,22 @@ export const Table = React.memo(
properties.autogenerateColumns ?? false,
id
);
useDynamicColumn && setGeneratedColumn(generatedColumnFromData);
if (useDynamicColumn) {
const dynamicColumnHasId = dynamicColumn && dynamicColumn.every((column) => 'id' in column);
if (!dynamicColumnHasId) {
// if dynamic columns do not have an id then we need to manually compare the generated columns with the columns in the state because the id that we generate for columns without id is a uuid and it will be different every time
const generatedColumnsWithoutIds = generatedColumnFromData.map(({ id, ...rest }) => ({
...rest,
}));
const columnsFromStateWithoutIds = generatedColumn.map(({ id, ...rest }) => ({
...rest,
}));
!isEqual(generatedColumnsWithoutIds, columnsFromStateWithoutIds) &&
setGeneratedColumn(generatedColumnFromData);
return;
}
setGeneratedColumn(generatedColumnFromData);
}
}
}, [tableData, JSON.stringify(dynamicColumn)]);
@ -865,7 +880,6 @@ export const Table = React.memo(
currentData: data,
selectedRow: [],
selectedRowId: null,
pageIndex: pageIndex + 1,
});
if (tableDetails.selectedRowId || !isEmpty(tableDetails.selectedRowDetails)) {
toggleAllRowsSelected(false);

2
frontend/src/AppBuilder/_stores/slices/eventsSlice.js
View file

@ -211,7 +211,7 @@ export const createEventsSlice = (set, get) => ({
state.eventsSlice.module[moduleId].events = newEvents;
});
},
setTablePageIndex: (tableId, index) => {
setTablePageIndex: (tableId, index = 1) => {
const { getExposedValueOfComponent } = get();
if (_.isEmpty(tableId)) {
console.log('No table is associated with this event.');

10
frontend/src/_ui/AppButton/AppButton.scss
View file

@ -21,6 +21,16 @@
align-items: center;
}
&.table-pagination-btn{
&:disabled {
svg {
path {
fill: var(--slate8) !important;
}
}
}
}
&:disabled {
background: var(--slate6) !important;
color: var(--slate9) !important;