React Component for User Access Right Setup Page

[TAN LOO TOON]

Hi Support Team,

I want to seek your advice on which Syncfusion React Component is suitable to used to develop User Access Control page as per screenshot ; and also is there any sample code using the Syncfusion React component to achieve this objective.

Here are my Current User Access Control page, developed by previous developer, code is not scalable.

Now, I wish to migrate this layout to Syncfusion React Component.

Can you advice?

1. Orange colour - Modules and Function - dynamically from config_access_right_groups table & config_access_rights table.

2. Green colour - User Roles - dynamically from company_user_roles table.

3. Blue colour - User roles access given , retrieve from company_user_role_access table

[TAN LOO TOON]

here is my prototype.

[Vasanthakumar K]

Hi TAN LOO TOON,

Greetings from Syncfusion support.

After reviewing the provided information, it has been observed that you wish to develop the user interface illustrated in the screenshot using the Syncfusion components. This can be accomplished by utilizing the Syncfusion Pivot Table or Frozen Stacked Header Enabled Data Grid component with sample-level customization. However, before moving forward with this requirement, we require some additional information. Please provide the following details:

Edit and Delete Functionalities: Please describe the specifics of the edit and delete functionalities available for each row header.

Checkbox Functionality: Please elaborate on the checkbox functionality for each row.

For further information on the pivot table and data grid, please refer to the documentation below.

Documentation with sample Links:

• Pivot Table · Overview · Syncfusion React UI Components
• Getting started with React Pivotview component | Syncfusion
• Data Grid Stacked Header demo. & Data Grid Stacked Header Documentation.
• Data Grid Frozen Columns demo. & Stacked Header with Frozen Enabled Data Grid Sample.
• Data Grid Editing documentation & Data Grid Column Always Editable documentation.

Regards,

Vasanthakumar K