Complex Data Table Analysis

This is a high level design for the obap-data-table element, which is a "complex" data table. It's difficult to define exactly what a complex data table is, but it should support the following features at a minimum:

Table Features

• Fixed header.
• Stacked headers.
• Fixed columns.
• Fixed footer.
• Sorting.
• Filtering.
• Grouping.
• Detail Rows.
• Detail pane/view.
• Standard and custom cells.
• Paging and single view.
• Large datasets (horizontal and vertical).
• Flexible cell visualizations (embedded elements).
• Auto, fixed and resizable columns.
• Column reordering (by dragging).
• Row selection: None, single and multiple rows.
• Inline cell editing.
• User configuration (column visibility, layout persistence).
• Exporting.

Table Structure

This is a high level breakdown of the functional parts of the table.

data-table
    - grouper
        - group-item
    - table
        - header-row
            - left-fixed-actions
                - fixed-header-action-cell
            - left-fixed-columns
                - fixed-header-cell
            - scrollable-columns
                - scrollable-header-cell
            - right-fixed-columns
                - fixed-header-cell 
            - right-fixed-actions
                - fixed-header-action-cell
        - body-rows
            - left-fixed-actions
                - fixed-body-action-cell
            - left-fixed-columns
                - fixed-body-cell
            - scrollable-columns
                - scrollable-body-cell
            - right-fixed-columns
                - fixed-body-cell 
            - right-fixed-actions
                - fixed-body-action-cell
            - row-detail
        - footer-row
            - left-fixed-actions
                - fixed-footer-action-cell
            - left-fixed-columns
                - fixed-footer-cell
            - scrollable-columns
                - scrollable-footer-cell
            - right-fixed-columns
                - fixed-footer-cell 
            - right-fixed-actions
                - fixed-footer-action-cell
    - footer
        - pager

The various parts of the table will be managed by obap-data-table-layout, which handles the various fixed and scrolling parts of the table.

This reduces the problem to the following:

Cells

The grid row cells can be divided up as follows:

header-cells
    - action (select/check, menu, etc.)
    - normal
        - sortable & not sortable
        - left, right & center aligned (for different data types).
        - optional icon.
body-cells
    - fixed and scrollable (these will be visually different - probably just background color).
    - editable and not editable
    - cell type
        - text
        - number
        - datetime
        - boolean
        - action (select/check, menu, icon, text, etc.)
        - enum/icon
        - custom template
footer-cells
    - fixed and scrollable (these will be visually different - probably just background color).
    - standard aggregations (sum, average, etc).
    - custom aggregation

The difference between fixed and scrollable cells is just the background color, so it probably isn't worth distinguishing them this way - rather let the owner set the visual aspects. It makes sense that individual cells are separate custom elements, the decision being:

• Should there be a single cell element.
• Should there be different elements for the different data/cell types.

Grouping

Still need to figure this out, but will probably involve:

• Drag a column to/from the group area.
• Grouped rows are displayed as a master row with column:value that expands to show the grouped rows.
• Grouped rows nest.
• A grouped column isn't displayed in the grid.

Paging

Use obap-data-pager.

Other Considerations

The following also need to be figured out:

• How to resize columns.
• How to display grouped data.
• How to display detail rows.

Look and Feel

The table should follow the Material Design Guidelines and be consistent with obap-data-list.

What about obap-data-list?

It's functionally complete, and works, but doesn't have any bespoke child elements for cells, etc. It might we worth rewriting or updating it to use a similar approach to the complex table first as a proof of concept, maybe. Some shared functionality and styling will probably fall out as well.

POC

There's a couple of things that need working out:

• Detail and grouped rows (the solution is probably the same, but the implementation will differ for fixed columns).
• Column resizing.
• Column reordering (drag & drop).
• Stacked headers.
• It would be nice to have fixed columns and the header elevated (this could be a feature of obap-data-table-layout).
• Virtualization of rows (or handling a lot of data, at least).