Guardar la Configuración de Columnas con ProTable en Ant Design

En este artículo, abordaremos cómo guardar la configuración de columnas en ProTable de Ant Design, específicamente para mantener ocultas las columnas seleccionadas incluso después de recargar la página o volver a entrar en la misma. Si te enfrentas a problemas al intentar implementar esta funcionalidad, aquí te ofrecemos una solución y guía paso a paso.

Problema

Si estás utilizando ProTable y has intentado guardar la configuración de las columnas utilizando LocalStorage, es posible que enfrentes algunos inconvenientes:

1. Al elegir ocultar una columna, la opción desaparece de la lista de verificación en configuración, en lugar de estar desmarcada.
2. La configuración no se guarda después de recargar o volver a entrar en la página web.
3. La configuración afecta a otros usuarios, quienes no pueden ver las columnas ocultas a menos que hagan un reinicio.

Solución

La siguiente implementación se propone modificar el código proporcionado para resolver los problemas mencionados:

Paso 1: Obtener y guardar la configuración de columnas

Asegúrate de que tu estado inicial se carga correctamente desde LocalStorage y utiliza el useEffect para guardar las configuraciones actualizadas:

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

// Guardar la última configuración de columnas
useEffect(() => {
    if (columnSettings && Object.keys(columnSettings).length > 0) {
        localStorage.setItem(`table_column_settings_${username}`, JSON.stringify(columnSettings));
    }
}, [columnSettings]);

Paso 2: Manejo de cambios en la configuración de columnas

Modifica tu función de manejo para que mantenga la visibilidad adecuada de las columnas y refleje correctamente en la UI:

const handleColumnStateChange = (newSettings) => {
    console.log("Nuevas configuraciones de columnas recibidas:", newSettings);

    if (!newSettings || typeof newSettings !== "object") {
        console.error("Formato de configuración de columnas inválido:", newSettings);
        return;
    }

    // Asegúrate de que el nuevo estado de las columnas esté correctamente actualizado
    setColumnSettings((prevSettings) => ({
        ...prevSettings,
        ...newSettings,
    }));
};

Paso 3: Asignar el manejador a ProTable

Finalmente, asegúrate de que handleColumnStateChange está vinculado correctamente en el componente ProTable:

<ProTable
    onColumnsStateChange={handleColumnStateChange}
    columnsStateMap={columnSettings}
    // Otras props...
/>

Conclusión

Con estas modificaciones, podrás guardar de manera efectiva la configuración de columnas en ProTable de Ant Design, permitiendo que las columnas ocultas se mantengan ocultas tras la recarga de la página y que cada usuario tenga su propia configuración. Si sigues encontrando problemas, verifica que el uso de LocalStorage y la estructura de los datos sean correctos. Con esta guía, podrás mejorar la experiencia del usuario en tu aplicación. ¡Buena suerte!