Skip to content

Unable to customize header checkbox icon via headercheckboxicon slot due to commented out template in HeaderCheckbox component #7942

@indieveed

Description

@indieveed

Describe the bug

The headercheckboxicon slot in the Column component is documented in the type definitions and API, but it does not work in practice. The relevant template in the HeaderCheckbox component is commented out or missing, so any custom content provided to the headercheckboxicon slot is ignored and the default checkbox icon is always rendered.

This prevents users from customizing the header checkbox icon in DataTable selection columns, which is important for consistent UI/UX and theming.

Expected:
Custom content provided to the headercheckboxicon slot should be rendered in the header checkbox.

Actual:
The slot is ignored and the default icon is always shown, making

Pull Request Link

#7941

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-o5sngxzt?file=src%2FApp.vue

Environment

The issue doesn't depend on the environment.

Vue version

3.5.13

PrimeVue version

4.3.6

Node version

22.16.0

Browser(s)

No response

Steps to reproduce the behavior

  1. import Datatable from PrimeVue 4.3.6
  2. Use selectionMode="multiple" prop for the first column of the table
  3. Try overriding rowcheckboxicon and headercheckboxicon slots with any content
<DataTable
      v-model:selection="selectedProducts"
      :value="products"
      dataKey="id"
      tableStyle="min-width: 50rem"
    >
      <Column selectionMode="multiple" headerStyle="width: 3rem">
        <template #rowcheckboxicon>x</template>
        <template #headercheckboxicon>x</template>
      </Column>
      <Column field="code" header="Code"></Column>
      <Column field="name" header="Name"></Column>
      <Column field="category" header="Category"></Column>
      <Column field="quantity" header="Quantity"></Column>
</DataTable>

Actual behaviour:
The x symbol is rendered inside only the body rows' checkboxes, not in the header.

Expected behavior

The x symbol is rendered inside every checkbox, both in the body rows of the table and the header.

Metadata

Metadata

Labels

Type: BugIssue contains a bug related to a specific component. Something about the component is not working

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions