Merge pull request #493 from vsimakhin/fix/column-state-lost

fix column state saving

Author: vsimakhin

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [Unreleased]
+
+- Fix: column state (visibility/width) is not saved for some tables.
+
 ## [4.1.3] - 30.03.2026
 
 - Update: Golang and npm packages/security patches.

README.md

@@ -63,6 +63,10 @@ The application will automatically create a local SQLite database on the first s
 
 # Changelog
 
+## [Unreleased]
+
+- Fix: column state (visibility/width) is not saved for some tables.
+
 ## [4.1.3] - 30.03.2026
 
 - Update: Golang and npm packages/security patches.

app/ui/src/components/Attachments/AttachmentsTable.jsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from "react";
 import { Link } from 'react-router';
 import dayjs from "dayjs";
-import { GridActionsCell } from "@mui/x-data-grid";
+import { GridActionsCell, useGridApiRef } from "@mui/x-data-grid";
 // MUI
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -16,6 +16,7 @@ import DownloadAllAttachmentsButton from "./DownloadAllAttachmentsButton";
 
 
 export const AttachmentsTable = ({ attachments, setSelectedAttachment }) => {
+  const apiRef = useGridApiRef();
   const [filteredRows, setFilteredRows] = useState([]);
 
   const columns = useMemo(() => [
@@ -88,6 +89,7 @@ export const AttachmentsTable = ({ attachments, setSelectedAttachment }) => {
 
   return (
     <XDataGrid
+      apiRef={apiRef}
       tableId='attachments'
       title="Attachments"
       icon={<AttachFileOutlinedIcon />}

app/ui/src/components/Currency/CurrencyTable.jsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { GridActionsCell } from '@mui/x-data-grid';
+import { GridActionsCell, useGridApiRef } from '@mui/x-data-grid';
 // MUI UI elements
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box'
@@ -20,6 +20,7 @@ import XDataGrid from '../UIElements/XDataGrid/XDataGrid';
 import TableActionHeader from '../UIElements/TableActionHeader';
 
 export const CurrencyTable = ({ logbookData, currencyData, aircrafts }) => {
+  const apiRef = useGridApiRef();
   const { fieldNameF } = useSettings();
 
   const metricOptions = useMemo(() => (
@@ -188,6 +189,7 @@ export const CurrencyTable = ({ logbookData, currencyData, aircrafts }) => {
 
   return (
     <XDataGrid
+      apiRef={apiRef}
       tableId="currency"
       title="Currency"
       icon={<SecurityUpdateGoodOutlinedIcon />}

app/ui/src/components/Import/ImportTable.jsx

@@ -1,3 +1,4 @@
+import { useGridApiRef } from '@mui/x-data-grid';
 import { useMemo, useState } from 'react';
 // MUI UI elements
 import LinearProgress from '@mui/material/LinearProgress';
@@ -14,6 +15,7 @@ import XDataGrid from '../UIElements/XDataGrid/XDataGrid';
 import { createColumn, createDateColumn, createLandingColumn, createTimeColumn, sumTime } from '../Logbook/helpers';
 
 export const ImportTable = () => {
+  const apiRef = useGridApiRef();
   const [data, setData] = useState([]);
   const [inProgress, setInProgress] = useState(false);
   const { isSettingsLoading, fieldName } = useSettings();
@@ -149,6 +151,7 @@ export const ImportTable = () => {
     <>
       {inProgress && <LinearProgress />}
       <XDataGrid
+        apiRef={apiRef}
         tableId='import-logbook'
         title="Import"
         icon={<FileUploadOutlinedIcon />}

app/ui/src/components/Settings/CustomFields/CustomFieldsTable.jsx

@@ -1,6 +1,6 @@
 
 import { useMemo } from 'react';
-import { GridActionsCell } from '@mui/x-data-grid';
+import { GridActionsCell, useGridApiRef } from '@mui/x-data-grid';
 // MUI UI elements
 import Tooltip from '@mui/material/Tooltip';
 // MUI Icons
@@ -16,6 +16,7 @@ import XDataGrid from '../../UIElements/XDataGrid/XDataGrid';
 import HelpButton from './HelpButton';
 
 export const CustomFieldsTable = () => {
+  const apiRef = useGridApiRef();
   const { data, isCustomFieldsLoading } = useCustomFields();
 
   const columns = useMemo(() => [
@@ -52,6 +53,7 @@ export const CustomFieldsTable = () => {
 
   return (
     <XDataGrid
+      apiRef={apiRef}
       tableId='custom-fields'
       title='Custom Fields'
       icon={<TuneOutlinedIcon />}

app/ui/src/components/UIElements/XDataGrid/XDataGrid.jsx

@@ -1,5 +1,5 @@
 import { useMemo, useDeferredValue, useEffect } from 'react';
-import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid';
 import { useLocalStorageState } from '@toolpad/core';
 import dayjs from 'dayjs';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
@@ -118,8 +118,7 @@ const StyledDataGrid = styled(DataGrid)(({ theme }) => {
 });
 
 
-const XDataGridContent = ({ tableId, rows, columns, ...props }) => {
-  const apiRef = useGridApiRef();
+const XDataGridContent = ({ apiRef, tableId, rows, columns, ...props }) => {
   const [paginationModel, setPaginationModel] = useLocalStorageState(`${tableId}-pagination`, { pageSize: defaultPageSize, page: 0 }, { codec: codec });
   const [columnsState, setColumnsState] = useLocalStorageState(`${tableId}-columns`, {}, { codec: codec });