@@ -37,7 +37,11 @@ import {
3737 DataToolbarSkeleton ,
3838} from "@common/features/data/components/DataToolbar/DataToolbar" ;
3939import { EmptyDataContent } from "@common/features/data/components/EmptyData" ;
40- import { useDataColumns } from "@common/features/data/components/Table/utils/useDataColumns" ;
40+ import {
41+ useDataColumns ,
42+ useStoredHiddenColumns ,
43+ useStoredColumnOrder ,
44+ } from "@common/features/data/components/Table/utils/useDataColumns" ;
4145import { useQueryFilteredTable } from "@common/features/data/components/Table/utils/useQueryFilteredTable" ;
4246import { useSingleTableSchemaStatus } from "@common/features/data/components/TableSchema" ;
4347import { DataFilters } from "@common/features/data/components/DataFilters/DataFilters" ;
@@ -130,6 +134,77 @@ export function DataContent({
130134 width : ( ref . current ?. getSize ( ) || 1000 ) - 3 ,
131135 } ) ;
132136
137+ const [ hiddenColumnsRaw , setHiddenColumnsRaw ] =
138+ useStoredHiddenColumns ( localStorageKey ) ;
139+
140+ // Default to showing only 25 fields (including _id and _creationTime)
141+ const hiddenColumns = useMemo ( ( ) => {
142+ if ( hiddenColumnsRaw !== undefined ) {
143+ return hiddenColumnsRaw ;
144+ }
145+
146+ // First time - hide fields beyond the first 25
147+ // Ensure _id and _creationTime are always visible
148+ const visibleFields : string [ ] = [ ] ;
149+ const allTableFields = [ ...tableFields ] ;
150+
151+ // Add _id and _creationTime first if they exist
152+ if ( allTableFields . includes ( "_id" ) ) {
153+ visibleFields . push ( "_id" ) ;
154+ }
155+ if ( allTableFields . includes ( "_creationTime" ) ) {
156+ visibleFields . push ( "_creationTime" ) ;
157+ }
158+
159+ // Add remaining fields up to 25 total
160+ for ( const field of allTableFields ) {
161+ if (
162+ field !== "_id" &&
163+ field !== "_creationTime" &&
164+ visibleFields . length < 25
165+ ) {
166+ visibleFields . push ( field ) ;
167+ }
168+ }
169+
170+ // Hide everything else
171+ return allTableFields . filter ( ( field ) => ! visibleFields . includes ( field ) ) ;
172+ } , [ hiddenColumnsRaw , tableFields ] ) ;
173+
174+ // Wrap the setter to handle undefined -> [] conversion for functional updates
175+ const setHiddenColumns = useCallback (
176+ ( newHiddenColumns : string [ ] | ( ( prev : string [ ] ) => string [ ] ) ) => {
177+ if ( typeof newHiddenColumns === "function" ) {
178+ setHiddenColumnsRaw ( ( prev ) => newHiddenColumns ( prev || [ ] ) ) ;
179+ } else {
180+ setHiddenColumnsRaw ( newHiddenColumns ) ;
181+ }
182+ } ,
183+ [ setHiddenColumnsRaw ] ,
184+ ) ;
185+
186+ // Column order management
187+ const [ columnOrderRaw , setColumnOrderRaw ] =
188+ useStoredColumnOrder ( localStorageKey ) ;
189+
190+ const columnOrder = useMemo ( ( ) => columnOrderRaw || [ ] , [ columnOrderRaw ] ) ;
191+
192+ // Wrap the setter to handle undefined -> [] conversion for functional updates
193+ const setColumnOrder = useCallback (
194+ ( newColumnOrder : string [ ] | ( ( prev : string [ ] ) => string [ ] ) ) => {
195+ if ( typeof newColumnOrder === "function" ) {
196+ setColumnOrderRaw ( ( prev ) => newColumnOrder ( prev || [ ] ) ) ;
197+ } else {
198+ setColumnOrderRaw ( newColumnOrder ) ;
199+ }
200+ } ,
201+ [ setColumnOrderRaw ] ,
202+ ) ;
203+
204+ // Use tableFields directly for the combobox instead of deriving from columns
205+ // to avoid circular dependencies
206+ const allFields = useMemo ( ( ) => [ "*select" , ...tableFields ] , [ tableFields ] ) ;
207+
133208 const listRef = useRef < FixedSizeList > ( null ) ;
134209
135210 const scrollToTop = useCallback ( ( ) => listRef . current ?. scrollToItem ( 0 ) , [ ] ) ;
@@ -282,6 +357,11 @@ export function DataContent({
282357 hasFilters = { hasFiltersAndAtLeastOneDocument }
283358 showFilters = { showFilters }
284359 setShowFilters = { setShowFilters }
360+ allFields = { allFields }
361+ hiddenColumns = { hiddenColumns }
362+ setHiddenColumns = { setHiddenColumns }
363+ columnOrder = { columnOrder }
364+ setColumnOrder = { setColumnOrder }
285365 />
286366 ) }
287367
@@ -307,6 +387,7 @@ export function DataContent({
307387 />
308388 ) }
309389 < Table
390+ key = { columnOrder . join ( "," ) }
310391 activeSchema = { activeSchema }
311392 listRef = { listRef }
312393 loadMore = { loadNextPage }
@@ -338,6 +419,8 @@ export function DataContent({
338419 setPopup = { popupState . setPopup }
339420 deleteRows = { deleteRows }
340421 defaultDocument = { defaultDocument }
422+ hiddenColumns = { hiddenColumns }
423+ onColumnOrderChange = { setColumnOrder }
341424 onAddDraftFilter = { ( filter : Filter ) => {
342425 setDraftFilters ( ( prev ) =>
343426 prev
0 commit comments