Adds DataTable row_id for addressable rows

Adds a row_id proc that emits a data-row-id attribute on each
body row, plus an opt-in row_dom_id flag that also assigns a DOM
id namespaced by the table id, keeping ids unique across tables.
Rows whose proc returns a blank value get no attributes.

Diverges from Primer React's getRowId, which only feeds virtual
DOM keys: here the identifier addresses rows in the rendered DOM,
e.g. for Turbo Stream targets or test selectors.

Author: myabc

app/components/primer/open_project/data_table.html.erb

@@ -37,7 +37,7 @@
           <% end %>
           <% table.with_body(classes: "TableBody") do |tbody| %>
             <% rows.each do |row| %>
-              <% tbody.with_row(classes: "TableRow") do |tr| %>
+              <% tbody.with_row(**row_arguments(row)) do |tr| %>
                 <% cells_for(row).each do |cell| %>
                   <% cell_arguments = { classes: "TableCell", align: cell.column.align } %>
                   <% cell_arguments[:data] = cell.sort_data if cell.sortable? %>

app/components/primer/open_project/data_table.rb

@@ -112,6 +112,15 @@ def sort_data
       # @param divider [Boolean]
       #   Whether to render a presentational divider line below the title row,
       #   ported from Primer React's `Table.Divider`
+      # @param row_id [Proc, nil]
+      #   Optional `->(row)` returning an identifier for each row, emitted as a
+      #   `data-row-id` attribute on the row's `<tr>`. Unlike Primer React's
+      #   `getRowId` (which feeds virtual-DOM keys), this addresses rows in the
+      #   DOM, e.g. for Turbo Stream targets or test selectors. Rows for which
+      #   the proc returns a blank value get no attribute.
+      # @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 html_data [Hash]
       #   HTML data attributes to be passed to the table
       # @param system_arguments [Hash]
@@ -122,6 +131,8 @@ def initialize(
         initial_sort_column: nil,
         initial_sort_direction: nil,
         divider: false,
+        row_id: nil,
+        row_dom_id: false,
         html_data: {},
         **system_arguments
       )
@@ -130,6 +141,9 @@ def initialize(
         @initial_sort_column = initial_sort_column
         @initial_sort_direction = initial_sort_direction
         @divider = fetch_or_fallback_boolean(divider, false)
+        @row_id_proc = row_id
+        @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")
 
         @container_arguments = {}
@@ -286,6 +300,18 @@ def grid_template_from_columns(columns)
         end
       end
 
+      def row_arguments(row)
+        arguments = { classes: "TableRow" }
+        return arguments unless @row_id_proc
+
+        value = @row_id_proc.call(row).to_s
+        return arguments if value.blank?
+
+        arguments[:data] = { row_id: value }
+        arguments[:id] = "#{@id}-row-#{value}" if @row_dom_id
+        arguments
+      end
+
       def cell_content(cell, row)
         value = cell.column.render_cell(row).to_s
         return value if value.present? || cell.column.placeholder.blank?

previews/primer/open_project/data_table_preview/playground.html.erb

@@ -4,7 +4,8 @@
       rows,
       cell_padding: cell_padding,
       initial_sort_column: initial_sort_column,
-      initial_sort_direction: initial_sort_direction
+      initial_sort_direction: initial_sort_direction,
+      row_id: ->(row) { row.id }
     )
   ) do |data_table|
 %>

static/arguments.json

@@ -6094,6 +6094,18 @@
         "default": "`false`",
         "description": "Whether to render a presentational divider line below the title row, ported from Primer React's `Table.Divider`"
       },
+      {
+        "name": "row_id",
+        "type": "Proc, nil",
+        "default": "`nil`",
+        "description": "Optional `->(row)` returning an identifier for each row, emitted as a `data-row-id` attribute on the row's `<tr>`. Unlike Primer React's `getRowId` (which feeds virtual-DOM keys), this addresses rows in the DOM, e.g. for Turbo Stream targets or test selectors. Rows for which the proc returns a blank value get no attribute."
+      },
+      {
+        "name": "row_dom_id",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether each `<tr>` additionally gets a DOM `id`, namespaced by the table id to stay unique across tables. Requires `row_id`."
+      },
       {
         "name": "html_data",
         "type": "Hash",

static/info_arch.json

@@ -20011,6 +20011,18 @@
         "default": "`false`",
         "description": "Whether to render a presentational divider line below the title row, ported from Primer React's `Table.Divider`"
       },
+      {
+        "name": "row_id",
+        "type": "Proc, nil",
+        "default": "`nil`",
+        "description": "Optional `->(row)` returning an identifier for each row, emitted as a `data-row-id` attribute on the row's `<tr>`. Unlike Primer React's `getRowId` (which feeds virtual-DOM keys), this addresses rows in the DOM, e.g. for Turbo Stream targets or test selectors. Rows for which the proc returns a blank value get no attribute."
+      },
+      {
+        "name": "row_dom_id",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether each `<tr>` additionally gets a DOM `id`, namespaced by the table id to stay unique across tables. Requires `row_id`."
+      },
       {
         "name": "html_data",
         "type": "Hash",

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

@@ -460,6 +460,50 @@ def test_renders_no_divider_by_default
     assert_no_selector(".TableDivider")
   end
 
+  def test_emits_data_row_id_with_row_id_proc
+    render_component(@data, row_id: ->(row) { row.id }) do |data_table|
+      data_table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_selector("tbody tr[data-row-id='1']")
+    assert_selector("tbody tr[data-row-id='3']")
+    assert_no_selector("tbody tr[id]")
+  end
+
+  def test_emits_namespaced_dom_id_with_row_dom_id
+    render_component(@data, id: "my-table", row_id: ->(row) { row.id }, row_dom_id: true) do |data_table|
+      data_table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_selector("tbody tr#my-table-row-1[data-row-id='1']")
+  end
+
+  def test_emits_no_row_attributes_without_row_id_proc
+    render_component(@data) do |data_table|
+      data_table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_no_selector("tbody tr[data-row-id]")
+  end
+
+  def test_skips_row_attributes_for_blank_row_id
+    row_klass = Data.define(:id, :subject)
+    data = [row_klass.new(id: nil, subject: "First"), row_klass.new(id: 2, subject: "Second")]
+
+    render_component(data, row_id: ->(row) { row.id }) do |data_table|
+      data_table.with_column(field: :subject, header: "Subject")
+    end
+
+    assert_selector("tbody tr[data-row-id='2']")
+    assert_selector("tbody tr[data-row-id]", count: 1)
+  end
+
+  def test_raises_for_row_dom_id_without_row_id
+    assert_raises(ArgumentError) do
+      Primer::OpenProject::DataTable.new(@data, row_dom_id: true)
+    end
+  end
+
   def test_renders_default_empty_state_without_rows
     render_component([]) do |data_table|
       data_table.with_column(field: :subject, header: "Subject")