@@ -110,6 +110,7 @@ const EditableCell = ({
110
110
setSelectedRow,
111
111
schema,
112
112
reactSelect,
113
+ state : { pageIndex, pageSize } ,
113
114
} ) => {
114
115
const fieldSchema = { ...schema ?. properties ?. [ id ] , id : id } ;
115
116
const [ value , setValue ] = React . useState ( initialValue ) ;
@@ -122,7 +123,6 @@ const EditableCell = ({
122
123
setValue ( e . value ) ;
123
124
} else {
124
125
setValue ( e . map ( ( value ) => value . value ) ) ;
125
- console . log ( 'e' , e ) ;
126
126
}
127
127
} ;
128
128
@@ -185,9 +185,6 @@ function EditableTable(props) {
185
185
schema,
186
186
reactSelect,
187
187
} = props ;
188
- if ( data . length === 0 ) {
189
- addRowAfter ( { key : 'Enter' } , 0 ) ;
190
- }
191
188
const {
192
189
getTableProps,
193
190
getTableBodyProps,
@@ -211,7 +208,13 @@ function EditableTable(props) {
211
208
} ,
212
209
usePagination ,
213
210
) ;
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 ] ) ;
215
218
// Render the UI for your table
216
219
return (
217
220
< >
@@ -233,7 +236,9 @@ function EditableTable(props) {
233
236
prepareRow ( row ) ;
234
237
return (
235
238
< Table . Row
236
- className = { selectedRow === i ? 'selected-row' : '' }
239
+ className = {
240
+ selectedRow === pageIndex * pageSize + i ? 'selected-row' : ''
241
+ }
237
242
{ ...row . getRowProps ( ) }
238
243
>
239
244
{ row . cells . map ( ( cell ) => {
@@ -246,17 +251,21 @@ function EditableTable(props) {
246
251
< Table . Cell >
247
252
< div className = { 'row-actions' } >
248
253
< 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
+ } }
251
260
tabIndex = { 0 }
252
261
role = "button"
253
262
className = "row-action"
254
263
>
255
264
< Icon name = { plusSVG } size = "23px" />
256
265
</ span >
257
266
< 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 ) }
260
269
tabIndex = { 0 }
261
270
role = "button"
262
271
className = "row-action"
0 commit comments