This responsive pattern keeps the original table structure intact and adds horizontal scrolling when the available screen width is not sufficient to display all columns. It is a simple and effective solution for wide tables, especially when preserving the original row and column layout is important. On smaller screens, users can scroll horizontally to access the columns that are not currently visible.

This pattern keeps the leftmost column visible while the remaining data is displayed in an expandable layout. On smaller screens, additional column values can be revealed for each row without requiring the user to scroll through the full width of the table. This approach is particularly useful when the first column contains an important identifier, such as a name, product, or category.

This responsive pattern keeps the leftmost column fixed while allowing the remaining columns to scroll horizontally. It is useful for wide tables where users need to keep the main row identifier visible while reviewing additional information. As the table is scrolled horizontally, the fixed column remains in place to provide context for each row.

The Header Selection pattern allows users to choose which column they want to view alongside the primary column. This approach reduces the amount of information displayed at once and is well suited to smaller screens. Instead of scrolling through many columns, users can select the column that contains the information they are interested in.