Skip to content

Commit 4c0ae4e

Browse files
committed
fix paginated row edition and add/remove functionalities
1 parent ec3b57d commit 4c0ae4e

File tree

2 files changed

+28
-17
lines changed

2 files changed

+28
-17
lines changed

src/components/Widgets/EditableTable.jsx

+19-10
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ const EditableCell = ({
110110
setSelectedRow,
111111
schema,
112112
reactSelect,
113+
state: { pageIndex, pageSize },
113114
}) => {
114115
const fieldSchema = { ...schema?.properties?.[id], id: id };
115116
const [value, setValue] = React.useState(initialValue);
@@ -122,7 +123,6 @@ const EditableCell = ({
122123
setValue(e.value);
123124
} else {
124125
setValue(e.map((value) => value.value));
125-
console.log('e', e);
126126
}
127127
};
128128

@@ -185,9 +185,6 @@ function EditableTable(props) {
185185
schema,
186186
reactSelect,
187187
} = props;
188-
if (data.length === 0) {
189-
addRowAfter({ key: 'Enter' }, 0);
190-
}
191188
const {
192189
getTableProps,
193190
getTableBodyProps,
@@ -211,7 +208,13 @@ function EditableTable(props) {
211208
},
212209
usePagination,
213210
);
214-
211+
if (data.length === 0) {
212+
addRowAfter({ key: 'Enter' }, 0, pageIndex, pageSize);
213+
}
214+
React.useEffect(() => {
215+
gotoPage(pageIndex);
216+
// eslint-disable-next-line react-hooks/exhaustive-deps
217+
}, [data]);
215218
// Render the UI for your table
216219
return (
217220
<>
@@ -233,7 +236,9 @@ function EditableTable(props) {
233236
prepareRow(row);
234237
return (
235238
<Table.Row
236-
className={selectedRow === i ? 'selected-row' : ''}
239+
className={
240+
selectedRow === pageIndex * pageSize + i ? 'selected-row' : ''
241+
}
237242
{...row.getRowProps()}
238243
>
239244
{row.cells.map((cell) => {
@@ -246,17 +251,21 @@ function EditableTable(props) {
246251
<Table.Cell>
247252
<div className={'row-actions'}>
248253
<span
249-
onClick={(e) => addRowAfter(e, i)}
250-
onKeyDown={(e) => addRowAfter(e, i)}
254+
onClick={(e) => {
255+
addRowAfter(e, i, pageIndex, pageSize);
256+
}}
257+
onKeyDown={(e) => {
258+
addRowAfter(e, i, pageIndex, pageSize);
259+
}}
251260
tabIndex={0}
252261
role="button"
253262
className="row-action"
254263
>
255264
<Icon name={plusSVG} size="23px" />
256265
</span>
257266
<span
258-
onClick={(e) => removeRow(e, i)}
259-
onKeyDown={(e) => removeRow(e, i)}
267+
onClick={(e) => removeRow(e, i, pageIndex, pageSize)}
268+
onKeyDown={(e) => removeRow(e, i, pageIndex, pageSize)}
260269
tabIndex={0}
261270
role="button"
262271
className="row-action"

src/components/Widgets/ReactTableWidget.jsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -72,27 +72,29 @@ const ReactDataTableWidget = (props) => {
7272
onChange(id, newvalue);
7373
};
7474

75-
const removeRow = (event, rowIndex) => {
75+
const removeRow = (event, rowIndex, pageIndex, pageSize) => {
7676
setHasModifiedData(true);
7777
if (event.type === 'click' || event.key === 'Enter') {
78-
setSelectedRow(rowIndex);
79-
const newvalue = value.filter((v, i) => i !== rowIndex);
78+
setSelectedRow(pageIndex * pageSize + rowIndex);
79+
const newvalue = value.filter(
80+
(v, i) => i !== pageIndex * pageSize + rowIndex,
81+
);
8082
onChange(id, newvalue);
8183
}
8284
};
8385

84-
const addRowAfter = (event, rowIndex) => {
86+
const addRowAfter = (event, rowIndex, pageIndex, pageSize) => {
8587
setHasModifiedData(true);
8688
if (event.type === 'click' || event.key === 'Enter') {
8789
let newRowValue = {};
8890
schema.fieldsets[0].fields.forEach((field) => {
8991
newRowValue[field] = '';
9092
});
91-
setSelectedRow(rowIndex + 1);
93+
setSelectedRow(pageIndex * pageSize + rowIndex + 1);
9294
const newvalue = [
93-
...value.slice(0, rowIndex + 1),
95+
...value.slice(0, pageIndex * pageSize + rowIndex + 1),
9496
{ '@id': uuid(), ...newRowValue },
95-
...value.slice(rowIndex + 1),
97+
...value.slice(pageIndex * pageSize + rowIndex + 1),
9698
];
9799
onChange(id, newvalue);
98100
}

0 commit comments

Comments
 (0)