DataViewTable: Checkbox alignment in header is misaligned due to label margin-bottom

[rhamilto]

What is the issue?

Table header checkboxes in DataViewTable from @patternfly/react-data-view have incorrect vertical alignment due to a margin-bottom on the <label> element. This causes the checkbox to be misaligned with the text baseline.

Note: This issue is specific to DataViewTable. The regular Table component (https://www.patternfly.org/components/table#selectable-with-checkbox) does not exhibit this alignment problem.

Expected behavior:
The checkbox in DataViewTable headers should be vertically aligned with the text baseline, matching the alignment of checkboxes in table body cells.

Current behavior:
The checkbox appears slightly lower than it should be due to an extra margin-bottom on the label element.

Steps to reproduce

1. Create a DataViewTable with selectable rows
2. Observe the checkbox alignment in the header
3. Compare with checkbox alignment in body cells

Code example

import { DataView, DataViewTable } from '@patternfly/react-data-view';

const MyDataView = () => {
  const [selectedRows, setSelectedRows] = React.useState(new Set());
  
  const columns = [
    {
      id: 'select',
      props: {
        select: {
          onSelect: (_event, isSelecting) => {
            if (isSelecting) {
              setSelectedRows(new Set(['row1']));
            } else {
              setSelectedRows(new Set());
            }
          },
          isSelected: selectedRows.size > 0
        }
      }
    },
    {
      id: 'name',
      cell: <span>Name</span>
    }
  ];

  const rows = [
    {
      id: 'row1',
      cells: {
        select: {
          props: {
            select: {
              onSelect: (_event, isSelecting) => {
                const newSelected = new Set(selectedRows);
                isSelecting ? newSelected.add('row1') : newSelected.delete('row1');
                setSelectedRows(newSelected);
              },
              isSelected: selectedRows.has('row1')
            }
          }
        },
        name: 'Item 1'
      }
    }
  ];

  return (
    <DataView>
      <DataViewTable columns={columns} rows={rows} />
    </DataView>
  );
};

Root cause

The CSS for .pf-v6-c-table th label includes a margin-bottom that pushes the checkbox down. This is not present on td label elements, causing inconsistent alignment. This issue affects DataViewTable but not the regular Table component.

Workaround

.pf-v6-c-table th label {
  margin-bottom: 0;
}

Proposed solution

Remove or reduce the margin-bottom on .pf-v6-c-table th label to match the alignment of checkboxes in table body cells, specifically for DataViewTable rendering.

Product and version

• @patternfly/react-data-view: (DataViewTable component)

• @patternfly/react-table: 6.4.2

• User project: OpenShift Console

Type

Bug

---

Jira Issue: PF-4100

[coderabbitai]

⚠️ Possible Duplicate Issue(s)

• https://github.com/patternfly/patternfly-react/issues/12405

🔗 Related PRs

#12192 - fix(Label): render add variant labels as buttons [merged]
#12294 - fix(Menu): adjust initially drilled-in root menu height [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[rhamilto]

Turns out this issue is console specific because of some old custom CSS there.