Experiment/data table integration

[myabc]

Ticket

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[Copilot]

Pull request overview

This PR introduces a compatibility layer to render existing TableComponent / BorderBoxTableComponent implementations using Primer::OpenProject::DataTable, including a responsive variant that preserves the BorderBox mobile UX (labels + title + blank slate) while switching to DataTable markup.

Changes:

• Add OpPrimer::DataTableComponent + OpPrimer::DataTableRendering to render legacy table DSL through Primer::OpenProject::DataTable (sorting, empty state, pagination, actions column).
• Add OpPrimer::ResponsiveDataTableComponent and responsive styles to emulate BorderBox behavior on mobile while using DataTable.
• Extend RowComponent / BorderBoxRowComponent templates to support rendering a single column (or actions) via render_only:, and add component specs covering the new behavior.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
spec/components/users/table_component_spec.rb	Verifies Users table renders rows/columns, sorting links, actions, custom fields, and empty state behavior.
spec/components/row_component_spec.rb	Tests render_only: rendering for a single column and for the actions “cell”.
spec/components/op_primer/responsive_data_table_component_spec.rb	Covers responsive DataTable rendering, mobile title, optional actions column, and blank state.
spec/components/op_primer/data_table_component_spec.rb	Covers DataTable rendering (headers/rows/actions), turbo target wrapper, sorting, pagination, and header/column mismatch errors.
app/components/row_component.rb	Adds render_only support and an actions sentinel constant to render partial row content.
app/components/row_component.html.erb	Allows rendering either the full <tr> or only a single column/actions content.
app/components/op_primer/responsive_data_table_component.sass	Adds responsive layout rules to hide headers on mobile, position actions, and style “main” column.
app/components/op_primer/responsive_data_table_component.rb	New BorderBox-compatible façade using DataTableRendering plus responsive-specific hooks.
app/components/op_primer/data_table_rendering.rb	New rendering module mapping legacy DSL to Primer::OpenProject::DataTable (columns/actions/sorting/empty/pagination).
app/components/op_primer/data_table_component.rb	Generic TableComponent façade that enables actions column by default for parity with legacy template.
app/components/op_primer/border_box_row_component.html.erb	Adds render_only: support so BorderBox rows can render a single column/actions into DataTable cells.
app/components/_index.sass	Includes the new responsive DataTable styles in the components stylesheet index.

Comments suppressed due to low confidence (1)

app/components/op_primer/data_table_rendering.rb:138

• data_table instantiates a new row component multiple times per row (for row_classes and row_data). Since RowComponent computes memoized values like column_css_classes, this adds avoidable overhead on large tables. Consider memoizing a base row instance per row and reusing it for row-level metadata.

    def data_table
      Primer::OpenProject::DataTable.new(
        rows,
        classes: data_table_classes,
        sorting: sortable? ? :external : :client,
        sort_href_builder: (sort_href_builder if sortable?),
        initial_sort_column: initial_sort_column,
        initial_sort_direction: initial_sort_direction,
        row_classes: ->(row) { row_class.new(row: row, table: self).row_css_class },
        row_data: ->(row) { row_class.new(row: row, table: self).row_data }
      )