CODEWITHSUNDEEP
javascriptreactjsfrontendantdant-design-pro
user29841904
user29841904

Reputation: 1

Save column setting with ProTable in Ant-design

I'm using ProTable in Ant Design. I want to save the column setting (eg: hide a column) so that when I reenter / reload the webpage, previously hidden columns would remain hidden.

I tried to use LocalStorage with approach below:

// get the stored column settings
const [columnSettings, setColumnSettings] = useState(() => {
    if (!username) return {}; 
    const savedSettings = localStorage.getItem(`table_column_settings_${username}`);
    return savedSettings ? JSON.parse(savedSettings) : {}; 
});

// save the latest column settings 
useEffect(() => {
    if (columnSettings && Object.keys(columnSettings).length > 0) {
        localStorage.setItem(`table_column_settings_${username}`, JSON.stringify(columnSettings));
    }
}, [columnSettings]);

// handle the column setting of the tale 
const handleColumnStateChange = (newSettings) => {
    console.log("New column settings received:", newSettings);

    if (!newSettings || typeof newSettings !== "object") {
        console.error("Invalid column settings format:", newSettings);
        return;
    }

    setColumnSettings(newSettings);
};

handleColumnStateChange is called within the ProTable onColumnsStateChange={handleColumnStateChange}.

My idea is to save the updated column setting in LocalStorage and reset columns' visibility based on that stored in LocalStorage, and I add username in the LocalStorage key to make users' column settings independent of each other.

However, it brings some problems:

  1. when I choose to hide the column, that option will just disappear from the checklist in setting, instead of being unchecked.
  2. the setting is not saved after I reload / reenter the webpage
  3. the setting affects other users: they cannot see the hidden columns unless they press reset.

Anyone knows how to fix it? Thanks a lot!

Upvotes: 0

Views: 10

Answers (0)

Related Questions