@@ -37,121 +37,6 @@ export const useDataTableColumns = <T>({
37
37
*/
38
38
getInitialValueInEffect ?: boolean ;
39
39
} ) => {
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 } -columns-order` ,
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 } -columns-toggle` ,
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 } -columns-width` ,
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
-
155
40
// Default columns id ordered is the order of the columns in the array
156
41
const defaultColumnsOrder = ( columns && columns . map ( ( column ) => column . accessor ) ) || [ ] ;
157
42
@@ -170,13 +55,25 @@ export const useDataTableColumns = <T>({
170
55
} ) ) ;
171
56
172
57
// Store the columns order in localStorage
173
- const [ columnsOrder , setColumnsOrder ] = useAlignColumnsOrder ( ) ;
58
+ const [ columnsOrder , setColumnsOrder ] = useLocalStorage < string [ ] > ( {
59
+ key : `${ key } -columns-order` ,
60
+ defaultValue : defaultColumnsOrder as string [ ] ,
61
+ getInitialValueInEffect,
62
+ } ) ;
174
63
175
64
// Store the columns toggle in localStorage
176
- const [ columnsToggle , setColumnsToggle ] = useAlignColumnsToggle ( ) ;
65
+ const [ columnsToggle , setColumnsToggle ] = useLocalStorage < DataTableColumnToggle [ ] > ( {
66
+ key : `${ key } -columns-toggle` ,
67
+ defaultValue : defaultColumnsToggle as DataTableColumnToggle [ ] ,
68
+ getInitialValueInEffect,
69
+ } ) ;
177
70
178
71
// Store the columns widths in localStorage
179
- const [ columnsWidth , setColumnsWidth ] = useAlignColumnsWidth ( ) ;
72
+ const [ columnsWidth , setColumnsWidth ] = useLocalStorage < DataTableColumnWidth [ ] > ( {
73
+ key : `${ key } -columns-width` ,
74
+ defaultValue : defaultColumnsWidth as DataTableColumnWidth [ ] ,
75
+ getInitialValueInEffect,
76
+ } ) ;
180
77
181
78
// we won't use the "remove" function from useLocalStorage() because
182
79
// we got issue with rendering
0 commit comments