Customizations of FileManager Details View Table Columns

[Mayank Tanwar]

How I can customize (rearrage and add / remove) columns of FileManager Details View Table using stateless component?

Actually I have used redux global state to add customizations But they are not reflecting when I am using stateless template in file manager component.

Kindly suggest any method for such customizations

[Vishwanathan Muruganantham]

Hi Mayank,

Greetings from Syncfusion support.

We have reviewed your query and understand that you need to customize the columns in file manager component. Specifically, you want to be able to add new columns, remove existing ones, and rearrange the order of the columns. To achieve this, we have utilized React Redux, which allows for efficient state management and dynamic updates.

To demonstrate how this can be implemented, we have prepared a sample project that meets your requirements. This sample includes:

1. Adding Columns: You can easily add new columns to your file manager by dispatching an action that updates the state with the new column details.
2. Removing Columns: Columns can be removed by dispatching an action that filters out the column you wish to delete from the state.
3. Rearranging Columns: The order of the columns can be rearranged by dispatching an action that updates the state with the new order.

Refer to the below code snippet for reference.

redux/actions.jsx

export const ADD_COLUMN = 'ADD_COLUMN';

export const REMOVE_COLUMN = 'REMOVE_COLUMN';

export const REORDER_COLUMNS = 'REORDER_COLUMNS';

 

export const addColumn = (column) => ({

  type: ADD_COLUMN,

  payload: column,

});

 

export const removeColumn = (columnField) => ({

  type: REMOVE_COLUMN,

  payload: columnField,

});

 

export const reorderColumns = (newOrder) => ({

  type: REORDER_COLUMNS,

  payload: newOrder,

});

redux/reducer.jsx

…

const initialState = {

  columns: [

    { field: 'name', headerText: 'Name', minWidth: '120', textAlign: 'left' },

    { field: 'size', headerText: 'Size', minWidth: '70', textAlign: 'center' },

    { field: 'dateModified', headerText: 'Date Modified', minWidth: '90', textAlign: 'left' },

  ],

};

 

const fileManagerReducer = (state = initialState, action) => {

  switch (action.type) {

    case ADD_COLUMN:

      return {

        ...state,

        columns: [...state.columns, action.payload],

      };

    case REMOVE_COLUMN:

      return {

        ...state,

        columns: state.columns.filter(column => column.field !== action.payload),

      };

    case REORDER_COLUMNS:

      return {

        ...state,

        columns: action.payload,

      };

    default:

      return state;

  }

};

..

components/ FileManagerComponent.jsx

…

const columns = useSelector((state) => state.columns);

  let hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';

  return (

    <div className="control-section">

      <FileManagerComponent

        id="filemanager"

        view="Details"

        detailsViewSettings={{

          columns: columns, // Pass the customized columns

        }}

..

Please check the sample and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/vitejs-vite-82wgjt?file=src%2Fcomponents%2FFileManagerComponent.jsx

Best Regards,
Vishwanathan

[Mayank Tanwar]

I have did the same using Redux Tookit and the same is working as expected.

But the changes on columns are not reflected while using it with props: statelessTemplate = {["nodeTemplate"]} in FileManagerComponent

[Mayank Tanwar]

here is the exact code 

[Vishwanathan Muruganantham]

Hi Mayank,

We have reviewed your query and understand that state changes are not reflected when using stateless templates. We would like to inform you that stateless templates are used to prevent re-rendering during state updates, which is why changes may not be reflected. Additionally, while validating your last shared code, we noticed that you are using “nodeTemplate”, but the FileManager does not have a “nodeTemplate” property, and there is a typo in “statelessTemplates”. We have modified the code and attached the sample. Please let us know if you need any further assistance.

Please refer to the documentation below for further reference. https://ej2.syncfusion.com/react/documentation/common/template#stateless-template

Sample: https://stackblitz.com/edit/vitejs-vite-cnpbp5?file=src%2Fcomponents%2FFileManagerComponent.jsx

Best Regards,
Vishwanathan