Adds DataTable per-row class and data hooks

Downstream tables mark rows with state-derived classes and data
attributes, which row_id alone cannot express.

Author: myabc

.changeset/data-table-row-hooks.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": minor
+---
+
+`DataTable`: accepts `row_classes:` and `row_data:` procs, called with each row, so consumers can attach per-row CSS classes and data attributes to the rendered `<tr>`

app/components/primer/open_project/data_table.rb

@@ -136,6 +136,10 @@ def sort_data
       # @param row_dom_id [Boolean]
       #   Whether each `<tr>` additionally gets a DOM `id`, namespaced by the
       #   table id to stay unique across tables. Requires `row_id`.
+      # @param row_classes [Proc, nil]
+      #   Optional `->(row)` returning extra CSS classes for the row's `<tr>`.
+      # @param row_data [Proc, nil]
+      #   Optional `->(row)` returning a Hash of data attributes for the row's `<tr>`.
       # @param html_data [Hash]
       #   HTML data attributes to be passed to the table
       # @param system_arguments [Hash]
@@ -150,6 +154,8 @@ def initialize(
         divider: false,
         row_id: nil,
         row_dom_id: false,
+        row_classes: nil,
+        row_data: nil,
         html_data: {},
         **system_arguments
       )
@@ -161,6 +167,8 @@ def initialize(
         @sort_href_builder = sort_href_builder
         @divider = fetch_or_fallback_boolean(divider, false)
         @row_id_proc = row_id
+        @row_classes_proc = row_classes
+        @row_data_proc = row_data
         @row_dom_id = fetch_or_fallback_boolean(row_dom_id, false)
         raise ArgumentError, "`row_dom_id` requires a `row_id` proc" if @row_dom_id && @row_id_proc.nil?
         @id = system_arguments[:id] ||= self.class.generate_id(base_name: "data-table")
@@ -349,14 +357,19 @@ def grid_template_from_columns(columns)
       end
 
       def row_arguments(row)
-        arguments = { classes: "TableRow" }
-        return arguments unless @row_id_proc
+        arguments = { classes: class_names("TableRow", @row_classes_proc&.call(row)) }
 
-        value = @row_id_proc.call(row).to_s
-        return arguments if value.blank?
+        data = (@row_data_proc&.call(row) || {}).to_h
 
-        arguments[:data] = { row_id: value }
-        arguments[:id] = "#{@id}-row-#{value}" if @row_dom_id
+        if @row_id_proc
+          value = @row_id_proc.call(row).to_s
+          if value.present?
+            data = data.merge(row_id: value)
+            arguments[:id] = "#{@id}-row-#{value}" if @row_dom_id
+          end
+        end
+
+        arguments[:data] = data if data.any?
         arguments
       end
 

test/components/primer/open_project/data_table/data_table_test.rb

@@ -730,6 +730,40 @@ def test_cell_data_does_not_displace_sort_metadata
     assert_selector(".TableCell[data-sort-value='First'][data-extra='yes']")
   end
 
+  def test_applies_row_classes_from_the_proc
+    render_component(@data, row_classes: ->(row) { "row-#{row.id}" }) do |table|
+      table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_selector(".TableBody .TableRow.row-1")
+    assert_selector(".TableBody .TableRow.row-3")
+  end
+
+  def test_applies_row_data_from_the_proc
+    render_component(@data, row_data: ->(row) { { subject_slug: row.subject.downcase } }) do |table|
+      table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_selector(".TableRow[data-subject-slug='first']")
+  end
+
+  def test_row_data_coexists_with_row_id
+    render_component(@data, row_id: ->(row) { row.id }, row_data: ->(_row) { { extra: "yes" } }) do |table|
+      table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_selector(".TableRow[data-row-id='1'][data-extra='yes']")
+  end
+
+  def test_row_hooks_are_optional
+    render_component(@data) do |table|
+      table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_selector(".TableBody .TableRow", count: 3)
+    refute_selector(".TableBody .TableRow[data-row-id]")
+  end
+
   private
 
   def body_first_column_texts