Adds DataTable cell placeholder for blank values

Introduces DataTable::CellPlaceholder, a muted span ported from
Primer React's Table.CellPlaceholder, and a Column placeholder
option that substitutes it for blank cell values. Placeholder text
is display-only: blank values still sort as blank.

Custom cell renderers can also render the component directly.

Author: myabc

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

@@ -27,9 +27,9 @@
                 <% cell_arguments = { classes: "TableCell", align: cell.column.align } %>
                 <% cell_arguments[:data] = cell.sort_data if cell.sortable? %>
                 <% if cell.row_header? %>
-                  <% tr.with_row_header(**cell_arguments) { cell.column.render_cell(row).to_s } %>
+                  <% tr.with_row_header(**cell_arguments) { cell_content(cell, row) } %>
                 <% else %>
-                  <% tr.with_cell(**cell_arguments) { cell.column.render_cell(row).to_s } %>
+                  <% tr.with_cell(**cell_arguments) { cell_content(cell, row) } %>
                 <% end %>
               <% end %>
             <% end %>

app/components/primer/open_project/data_table.pcss

@@ -114,6 +114,11 @@
     border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
 }
 
+/* TableCellPlaceholder */
+.TableCellPlaceholder {
+    color: var(--fgColor-muted);
+}
+
 .TableHeader:where([data-cell-align='end']),
 .TableCell:where([data-cell-align='end']) {
     display: flex;

app/components/primer/open_project/data_table.rb

@@ -251,6 +251,13 @@ def grid_template_from_columns(columns)
         end
       end
 
+      def cell_content(cell, row)
+        value = cell.column.render_cell(row).to_s
+        return value if value.present? || cell.column.placeholder.blank?
+
+        render(CellPlaceholder.new) { cell.column.placeholder }
+      end
+
       def cells_for(row)
         headers.map do |header|
           sort_metadata = header.sortable? ? header.column.sort_metadata(row) : {}

app/components/primer/open_project/data_table/cell_placeholder.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class DataTable
+      # Renders muted placeholder text inside a table cell, standing in for
+      # an empty value. Ported from Primer React's `Table.CellPlaceholder`.
+      #
+      # This component is part of `Primer::OpenProject::DataTable` and should
+      # not be used as a standalone component. Use it inside a custom cell
+      # renderer, or set `placeholder:` on a column to substitute blank
+      # values automatically.
+      class CellPlaceholder < Primer::Component
+        status :open_project
+
+        # @param system_arguments [Hash]
+        #   System arguments passed to the root element
+        def initialize(**system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = :span
+          @system_arguments[:classes] = class_names(
+            @system_arguments[:classes],
+            "TableCellPlaceholder"
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

app/components/primer/open_project/data_table/column.rb

@@ -10,7 +10,7 @@ class Column < Primer::Component
 
         COLUMN_WIDTH_OPTIONS = %i[grow grow_collapse auto].freeze
 
-        attr_reader :id, :align, :field, :max_width, :min_width, :row_header, :sort_by, :width, :cell_block
+        attr_reader :id, :align, :field, :max_width, :min_width, :placeholder, :row_header, :sort_by, :width, :cell_block
 
         # Provide a custom cell renderer.
         #
@@ -36,6 +36,9 @@ def with_header(&block)
         # @param sort_value [Proc, nil] Optional `->(row)` returning the value used when sorting this column.
         #   Enables sorting of computed/fieldless columns. Falls back to `field` when omitted.
         # @param row_header [Boolean] Whether this column is a row header (`<th scope="row">`)
+        # @param placeholder [String, nil] Placeholder text substituted for blank cell values,
+        #   rendered as a muted <%= link_to_component(Primer::OpenProject::DataTable::CellPlaceholder) %>.
+        #   Display-only: blank values still sort as blank.
         # @param min_width [Numeric, String, nil] Minimum width
         # @param max_width [Numeric, String, nil] Maximum width
         def initialize(
@@ -47,12 +50,14 @@ def initialize(
           sort_by: nil,
           sort_value: nil,
           row_header: false,
+          placeholder: nil,
           min_width: nil,
           max_width: nil
         )
           @id = id
           @field = field
           @sort_value_proc = sort_value
+          @placeholder = placeholder
           @align = align
           @header = header
 

previews/primer/open_project/data_table_preview.rb

@@ -5,6 +5,7 @@ module OpenProject
     # @component Primer::OpenProject::DataTable
     class DataTablePreview < ViewComponent::Preview
       DemoProject = Data.define(:id, :name, :status_code, :created_at)
+      DemoAssignment = Data.define(:id, :name, :assignee)
 
       # @label Default
       # @snapshot
@@ -50,6 +51,18 @@ def playground(
         )
       end
 
+      # @label With Cell Placeholder
+      # @snapshot
+      def with_cell_placeholder
+        rows = [
+          DemoAssignment.new(id: 1, name: "Project 1", assignee: "Ada Lovelace"),
+          DemoAssignment.new(id: 2, name: "Project 2", assignee: nil),
+          DemoAssignment.new(id: 3, name: "Project 3", assignee: "Grace Hopper")
+        ]
+
+        render_with_template(locals: { rows: rows })
+      end
+
       # @label With Pagination
       # @snapshot
       # @param page [Integer] number

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

@@ -0,0 +1,11 @@
+<%=
+  render(
+    Primer::OpenProject::DataTable.new(rows)
+  ) do |data_table|
+    data_table.with_title(tag: :h2) { "Projects" }
+    data_table.with_subtitle { "Blank assignees render a muted placeholder." }
+
+    data_table.with_column(field: :name, header: "Name", row_header: true)
+    data_table.with_column(field: :assignee, header: "Assignee", placeholder: "Unassigned")
+  end
+%>

static/arguments.json

@@ -6102,6 +6102,22 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::DataTable::CellPlaceholder",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectDataTableCellPlaceholder",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/data_table/cell_placeholder.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/data_table/cell_placeholder/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "System arguments passed to the root element"
+      }
+    ]
+  },
   {
     "component": "OpenProject::DataTable::Column",
     "status": "open_project",
@@ -6158,6 +6174,12 @@
         "default": "`false`",
         "description": "Whether this column is a row header (`<th scope=\"row\">`)"
       },
+      {
+        "name": "placeholder",
+        "type": "String, nil",
+        "default": "`nil`",
+        "description": "Placeholder text substituted for blank cell values, rendered as a muted [OpenProject::DataTable::CellPlaceholder](/components/openprojectdatatablecellplaceholder). Display-only: blank values still sort as blank."
+      },
       {
         "name": "min_width",
         "type": "Numeric, String, nil",

static/audited_at.json

@@ -150,6 +150,7 @@
   "Primer::OpenProject::DangerDialog::ConfirmationCheckBox": "",
   "Primer::OpenProject::DangerDialog::FormWrapper": "",
   "Primer::OpenProject::DataTable": "",
+  "Primer::OpenProject::DataTable::CellPlaceholder": "",
   "Primer::OpenProject::DataTable::Column": "",
   "Primer::OpenProject::DataTable::PaginationFooter": "",
   "Primer::OpenProject::DataTable::SortHeader": "",

static/constants.json

@@ -1774,6 +1774,7 @@
       "spacious"
     ],
     "Cell": "Primer::OpenProject::DataTable::Cell",
+    "CellPlaceholder": "Primer::OpenProject::DataTable::CellPlaceholder",
     "Column": "Primer::OpenProject::DataTable::Column",
     "GeneratedSlotMethods": "Primer::OpenProject::DataTable::GeneratedSlotMethods",
     "Header": "Primer::OpenProject::DataTable::Header",
@@ -1788,6 +1789,9 @@
     "Sorting": "Primer::OpenProject::DataTable::Sorting",
     "TITLE_TAG_DEFAULT": "h2"
   },
+  "Primer::OpenProject::DataTable::CellPlaceholder": {
+    "GeneratedSlotMethods": "Primer::OpenProject::DataTable::CellPlaceholder::GeneratedSlotMethods"
+  },
   "Primer::OpenProject::DataTable::Column": {
     "COLUMN_WIDTH_OPTIONS": [
       "grow",