@@ -37,121 +37,6 @@ export const useDataTableColumns = <T>({
3737 */
3838 getInitialValueInEffect ?: boolean ;
3939} ) => {
40- // align order
41- function alignColumnsOrder < T > ( columnsOrder : string [ ] , columns : DataTableColumn < T > [ ] ) {
42- const updatedColumnsOrder : string [ ] = [ ] ;
43- columnsOrder . forEach ( ( col ) => {
44- if ( columns . find ( ( c ) => c . accessor === col ) ) {
45- updatedColumnsOrder . push ( col ) ;
46- }
47- } ) ;
48- columns . forEach ( ( col ) => {
49- if ( ! updatedColumnsOrder . includes ( col . accessor as string ) ) {
50- updatedColumnsOrder . push ( col . accessor as string ) ;
51- }
52- } ) ;
53- return updatedColumnsOrder ;
54- }
55-
56- // align toggle
57- function alignColumnsToggle < T > ( columnsToggle : DataTableColumnToggle [ ] , columns : DataTableColumn < T > [ ] ) {
58- const updatedColumnsToggle : DataTableColumnToggle [ ] = [ ] ;
59- columnsToggle . forEach ( ( col ) => {
60- if ( columns . find ( ( c ) => c . accessor === col . accessor ) ) {
61- updatedColumnsToggle . push ( col ) ;
62- }
63- } ) ;
64- columns . forEach ( ( col ) => {
65- if ( ! updatedColumnsToggle . find ( ( c ) => c . accessor === col . accessor ) ) {
66- updatedColumnsToggle . push ( {
67- accessor : col . accessor as string ,
68- defaultToggle : col . defaultToggle || true ,
69- toggleable : col . toggleable as boolean ,
70- toggled : col . defaultToggle === undefined ? true : col . defaultToggle ,
71- } ) ;
72- }
73- } ) ;
74- return updatedColumnsToggle as DataTableColumnToggle [ ] ;
75- }
76-
77- // align width
78- function alignColumnsWidth < T > ( columnsWidth : DataTableColumnWidth [ ] , columns : DataTableColumn < T > [ ] ) {
79- const updatedColumnsWidth : DataTableColumnWidth [ ] = [ ] ;
80-
81- columnsWidth . forEach ( ( col ) => {
82- const accessor = Object . keys ( col ) [ 0 ] ;
83- if ( columns . find ( ( c ) => c . accessor === accessor ) ) {
84- updatedColumnsWidth . push ( col ) ;
85- }
86- } ) ;
87-
88- columns . forEach ( ( col ) => {
89- const accessor = col . accessor ;
90- if ( ! updatedColumnsWidth . find ( ( c ) => Object . keys ( c ) [ 0 ] === accessor ) ) {
91- const widthObj : DataTableColumnWidth = { } ;
92- widthObj [ accessor as string ] = '' ;
93- updatedColumnsWidth . push ( widthObj ) ;
94- }
95- } ) ;
96-
97- return updatedColumnsWidth ;
98- }
99-
100- // align order
101- function useAlignColumnsOrder ( ) {
102- const [ columnsOrder , setColumnsOrder ] = useLocalStorage < string [ ] > ( {
103- key : `${ key } ,
104- defaultValue : defaultColumnsOrder as string [ ] ,
105- getInitialValueInEffect,
106- } ) ;
107-
108- const alignedColumnsOrder = alignColumnsOrder ( columnsOrder , columns ) ;
109-
110- const prevColumnsOrder = JSON . stringify ( columnsOrder ) ;
111-
112- if ( JSON . stringify ( alignedColumnsOrder ) !== prevColumnsOrder ) {
113- setColumnsOrder ( alignedColumnsOrder ) ;
114- }
115-
116- return [ alignedColumnsOrder , setColumnsOrder ] as const ;
117- }
118-
119- function useAlignColumnsToggle ( ) {
120- const [ columnsToggle , setColumnsToggle ] = useLocalStorage < DataTableColumnToggle [ ] > ( {
121- key : `${ key } ,
122- defaultValue : defaultColumnsToggle as DataTableColumnToggle [ ] ,
123- getInitialValueInEffect,
124- } ) ;
125-
126- const alignedColumnsToggle = alignColumnsToggle ( columnsToggle , columns ) ;
127-
128- const prevColumnsToggle = JSON . stringify ( columnsToggle ) ;
129-
130- if ( JSON . stringify ( alignedColumnsToggle ) !== prevColumnsToggle ) {
131- setColumnsToggle ( alignedColumnsToggle ) ;
132- }
133-
134- return [ alignColumnsToggle ( columnsToggle , columns ) , setColumnsToggle ] as const ;
135- }
136-
137- function useAlignColumnsWidth ( ) {
138- const [ columnsWidth , setColumnsWidth ] = useLocalStorage < DataTableColumnWidth [ ] > ( {
139- key : `${ key } ,
140- defaultValue : defaultColumnsWidth as DataTableColumnWidth [ ] ,
141- getInitialValueInEffect,
142- } ) ;
143-
144- const alignedColumnsWidth = alignColumnsWidth ( columnsWidth , columns ) ;
145-
146- const prevColumnsWidth = JSON . stringify ( columnsWidth ) ;
147-
148- if ( JSON . stringify ( alignedColumnsWidth ) !== prevColumnsWidth ) {
149- setColumnsWidth ( alignedColumnsWidth ) ;
150- }
151-
152- return [ alignColumnsWidth ( columnsWidth , columns ) , setColumnsWidth ] as const ;
153- }
154-
15540 // Default columns id ordered is the order of the columns in the array
15641 const defaultColumnsOrder = ( columns && columns . map ( ( column ) => column . accessor ) ) || [ ] ;
15742
@@ -170,13 +55,25 @@ export const useDataTableColumns = <T>({
17055 } ) ) ;
17156
17257 // Store the columns order in localStorage
173- const [ columnsOrder , setColumnsOrder ] = useAlignColumnsOrder ( ) ;
58+ const [ columnsOrder , setColumnsOrder ] = useLocalStorage < string [ ] > ( {
59+ key : `${ key } ,
60+ defaultValue : defaultColumnsOrder as string [ ] ,
61+ getInitialValueInEffect,
62+ } ) ;
17463
17564 // Store the columns toggle in localStorage
176- const [ columnsToggle , setColumnsToggle ] = useAlignColumnsToggle ( ) ;
65+ const [ columnsToggle , setColumnsToggle ] = useLocalStorage < DataTableColumnToggle [ ] > ( {
66+ key : `${ key } ,
67+ defaultValue : defaultColumnsToggle as DataTableColumnToggle [ ] ,
68+ getInitialValueInEffect,
69+ } ) ;
17770
17871 // Store the columns widths in localStorage
179- const [ columnsWidth , setColumnsWidth ] = useAlignColumnsWidth ( ) ;
72+ const [ columnsWidth , setColumnsWidth ] = useLocalStorage < DataTableColumnWidth [ ] > ( {
73+ key : `${ key } ,
74+ defaultValue : defaultColumnsWidth as DataTableColumnWidth [ ] ,
75+ getInitialValueInEffect,
76+ } ) ;
18077
18178 // we won't use the "remove" function from useLocalStorage() because
18279 // we got issue with rendering
0 commit comments