@@ -260,110 +260,136 @@ export function Table(initialState: TableDataType) {
260260 />
261261 { /** Headers */ }
262262 { headerGroups . map ( ( headerGroup , i ) => (
263- < DragDropContext
264- key = { `DragDropContext-${ i } ` }
265- onDragStart = { ( ) => {
266- console . log ( headerGroup . headers ) ;
267- currentColOrder . current = allColumns . map ( ( o : Column ) => o . id ) ;
268- } }
269- onDragUpdate = { ( dragUpdateObj , b ) => {
270- const colOrder = [ ...currentColOrder . current ] ;
271- const sIndex = dragUpdateObj . source . index ;
272- const dIndex =
273- dragUpdateObj . destination && dragUpdateObj . destination . index ;
263+ < div
264+ { ...headerGroup . getHeaderGroupProps ( {
265+ style : {
266+ width :
267+ totalWidth -
268+ columnsWidthState . widthRecord [ MetadataColumns . ADD_COLUMN ] ,
269+ } ,
270+ } ) }
271+ >
272+ < DragDropContext
273+ key = { `DragDropContext-${ i } ` }
274+ onDragStart = { ( ) => {
275+ currentColOrder . current = allColumns . map ( ( o : Column ) => o . id ) ;
276+ } }
277+ onDragUpdate = { ( dragUpdateObj , b ) => {
278+ const colOrder = [ ...currentColOrder . current ] ;
279+ const sIndex = dragUpdateObj . source . index ;
280+ const dIndex =
281+ dragUpdateObj . destination &&
282+ dragUpdateObj . destination . index ;
274283
275- if ( typeof sIndex === "number" && typeof dIndex === "number" ) {
276- colOrder . splice ( sIndex , 1 ) ;
277- colOrder . splice ( dIndex , 0 , dragUpdateObj . draggableId ) ;
278- setColumnOrder ( colOrder ) ;
279- }
280- } }
281- onDragEnd = { ( result ) => {
282- // save on disk in case of changes
283- if ( result . source . index !== result . destination ! . index ) {
284- initialState . view . diskConfig . reorderColumns (
285- ( state as any ) . columnOrder
286- ) ;
287- }
284+ if (
285+ typeof sIndex === "number" &&
286+ typeof dIndex === "number"
287+ ) {
288+ colOrder . splice ( sIndex , 1 ) ;
289+ colOrder . splice ( dIndex , 0 , dragUpdateObj . draggableId ) ;
290+ setColumnOrder ( colOrder ) ;
291+ }
292+ } }
293+ onDragEnd = { ( result ) => {
294+ // save on disk in case of changes
295+ if ( result . source . index !== result . destination ! . index ) {
296+ initialState . view . diskConfig . reorderColumns (
297+ ( state as any ) . columnOrder
298+ ) ;
299+ }
288300
289- // clear the current order
290- currentColOrder . current = null ;
291- } }
292- >
293- < Droppable
294- key = { `Droppable-${ i } ` }
295- droppableId = "droppable"
296- direction = "horizontal"
301+ // clear the current order
302+ currentColOrder . current = null ;
303+ } }
297304 >
298- { ( provided , snapshot ) => (
299- < div
300- key = { `div-Droppable-${ i } ` }
301- { ...provided . droppableProps }
302- { ...headerGroup . getHeaderGroupProps ( {
303- style : {
304- ...getDndListStyle ( snapshot . isDraggingOver ) ,
305- width :
306- totalWidth -
307- columnsWidthState . widthRecord [
308- MetadataColumns . ADD_COLUMN
309- ] ,
310- } ,
311- } ) }
312- ref = { provided . innerRef }
313- className = { `${ c ( "tr header-group" ) } ` }
314- >
315- { headerGroup . headers
316- . filter ( ( o : any ) => o . key !== MetadataColumns . ADD_COLUMN )
317- . map ( ( column , index ) => (
318- < Draggable
319- key = { `Draggable-${ column . id } ` }
320- draggableId = { `${ column . id } ` }
321- index = { index }
322- isDragDisabled = { ( column as any ) . skipPersist }
323- disableInteractiveElementBlocking = {
324- ( column as any ) . skipPersist
325- }
326- >
327- { ( provided , snapshot ) => {
328- const tableCellBaseProps = {
329- ...provided . draggableProps ,
330- ...provided . dragHandleProps ,
331- ...column . getHeaderProps ( {
332- style : {
333- width : `${
334- columnsWidthState . widthRecord [ column . id ]
335- } px`,
336- ...getDndItemStyle (
337- snapshot . isDragging ,
338- provided . draggableProps . style
339- ) ,
340- } ,
341- } ) ,
342- className : `${ c ( "th noselect" ) } header` ,
343- key : `div-Draggable-${ column . id } ` ,
344- // {...extraProps}
345- ref : provided . innerRef ,
346- } ;
347- return (
348- < div { ...tableCellBaseProps } >
349- < HeaderContext . Provider
350- value = { {
351- columnWidthState : columnsWidthState ,
352- setColumnWidthState : setColumnsWidthState ,
353- } }
354- >
355- { column . render ( "Header" ) }
356- </ HeaderContext . Provider >
357- </ div >
358- ) ;
359- } }
360- </ Draggable >
361- ) ) }
362- { provided . placeholder }
305+ < Droppable
306+ key = { `Droppable-${ i } ` }
307+ droppableId = "droppable"
308+ direction = "horizontal"
309+ >
310+ { ( provided , snapshot ) => (
311+ < div
312+ key = { `div-Droppable-${ i } ` }
313+ { ...provided . droppableProps }
314+ { ...headerGroup . getHeaderGroupProps ( {
315+ style : {
316+ ...getDndListStyle ( snapshot . isDraggingOver ) ,
317+ } ,
318+ } ) }
319+ ref = { provided . innerRef }
320+ className = { `${ c ( "tr header-group" ) } ` }
321+ >
322+ { headerGroup . headers
323+ . filter (
324+ ( o : any ) => o . key !== MetadataColumns . ADD_COLUMN
325+ )
326+ . map ( ( column , index ) => (
327+ < Draggable
328+ key = { `Draggable-${ column . id } ` }
329+ draggableId = { `${ column . id } ` }
330+ index = { index }
331+ isDragDisabled = {
332+ ( column as unknown as TableColumn ) . isDragDisabled
333+ }
334+ disableInteractiveElementBlocking = {
335+ ( column as unknown as TableColumn ) . isDragDisabled
336+ }
337+ >
338+ { ( provided , snapshot ) => {
339+ const tableCellBaseProps = {
340+ ...provided . draggableProps ,
341+ ...provided . dragHandleProps ,
342+ ...column . getHeaderProps ( {
343+ style : {
344+ width : `${
345+ columnsWidthState . widthRecord [ column . id ]
346+ } px`,
347+ ...getDndItemStyle (
348+ snapshot . isDragging ,
349+ provided . draggableProps . style
350+ ) ,
351+ } ,
352+ } ) ,
353+ className : `${ c ( "th noselect" ) } header` ,
354+ key : `div-Draggable-${ column . id } ` ,
355+ // {...extraProps}
356+ ref : provided . innerRef ,
357+ } ;
358+ return (
359+ < div { ...tableCellBaseProps } >
360+ < HeaderContext . Provider
361+ value = { {
362+ columnWidthState : columnsWidthState ,
363+ setColumnWidthState : setColumnsWidthState ,
364+ } }
365+ >
366+ { column . render ( "Header" ) }
367+ </ HeaderContext . Provider >
368+ </ div >
369+ ) ;
370+ } }
371+ </ Draggable >
372+ ) ) }
373+ { provided . placeholder }
374+ </ div >
375+ ) }
376+ </ Droppable >
377+ </ DragDropContext >
378+ { headerGroup . headers
379+ . filter ( ( o : any ) => o . key === MetadataColumns . ADD_COLUMN )
380+ . map ( ( column , index ) => (
381+ < div { ...column . getHeaderProps ( ) } >
382+ < HeaderContext . Provider
383+ value = { {
384+ columnWidthState : columnsWidthState ,
385+ setColumnWidthState : setColumnsWidthState ,
386+ } }
387+ >
388+ { column . render ( "Header" ) }
389+ </ HeaderContext . Provider >
363390 </ div >
364- ) }
365- </ Droppable >
366- </ DragDropContext >
391+ ) ) }
392+ </ div >
367393 ) ) }
368394 </ div >
369395 { /** Body */ }
0 commit comments