Double grid approach to display related data

Question

This is my problem: when the user selects a record from the first table, all parameters relevant to the selected h2h column must be displayed below the table. When the user selects the second row from the first table, the relevant records from the second table should be filtered. (The 2nd table also has options to add and delete).

Screenshot taken from swing client, which is already implemented. My task is to take this and implement it as a web UI. Below are my suggestions

• Implement a right sheet (a panel appears on the right side) when selecting a record from the first table and display the relevant parameters.
• Implement the same behavior and UX for Web UI.

From the accessibility point of view, I do not think the second option is useful (E.G.: When using a screen reader for people with disabilities, it should display the selection of the first table and the records of the second table). I hope this is a small challenge to continue with the double grid approach.

How can I solve the problem?

Answer 1

Well, I'm not sure I understand the problem correctly, but it seems to be a relatively simple CRUD with a somewhat strange implementation.

However, if it's a backend, you probably only need to display data on the web and not provide edition capabilities. So you can simply design an interface with expandable rows, which are easy to implement in terms of accessibility. Once the user clicks on one of these rows, the information will be displayed as desired, not necessarily in a table (moreover, it should most likely not be in table form).

Please note one thing: Since the dropdown is in the first column (which is correct as it relates to the hotel), but the information relates to the second column, you need to make sure that the columns for the first table disappear or are disabled as I've done in the mockup below.

If you want this table to be editable, you can still do the same thing, except this time you need a form. Using a table with selectable items like checkboxes is very complicated in terms of accessibility, so just use a form with properly labeled fields with ARIA