[Grid - Selection] Support for Disabling/Making Rows Non-Selectable in sl-grid

[iErKy]

Provide a general summary of the feature here

Components

@sl-design-system/grid (v0.6.3) @sl-design-system/checkbox (v2.1.7)

Summary

Add support for disabling or preventing selection of specific rows in sl-grid based on item-level properties or conditions.

🤔 Expected Behavior?

Expected Implementation

When a row is disabled:

1. The checkbox in the selection column should be visually disabled (using sl-checkbox's disabled attribute)
2. Clicking the checkbox should not change its state
3. The row should have a visual indication (e.g., reduced opacity, specific CSS part)
4. The "select all" checkbox should only select enabled rows

Benefits

• Consistent UX: Follows standard data table patterns found in most UI libraries
• Accessibility: Properly disabled checkboxes improve screen reader experience
• Developer Experience: Avoids complex workarounds with custom renderers and event interception
• Performance: Built-in support is more efficient than custom solutions

😯 Current Behavior

Current Behavior

The sl-grid component with sl-grid-selection-column allows all rows to be selected without any way to conditionally disable selection at the item level.

<sl-grid [items]="lessonFlows()" [striped]="true">
  <sl-grid-selection-column [scopedElements]="{'sl-checkbox': Checkbox}" />
  <!-- other columns -->
</sl-grid>

Current Workarounds

We've explored several workarounds, but none are ideal:

1. Using itemParts for styling only - Provides visual feedback but doesn't prevent selection
2. Filtering items - Removes items from view entirely (not acceptable when they need to be visible)
3. Custom selection event handling - Complex, error-prone, and fights against the component's built-in behavior
4. Custom checkbox renderer - Would require extensive customization and may break other grid features

Similar Features in Other Libraries

This functionality exists in many data table libraries:

• AG Grid: rowClassRules with selection prevention
• Material Table: isRowSelectable callback
• PrimeNG Table: selectionMode with conditional logic
• Ant Design Table: getCheckboxProps returning disabled

💁 Possible Solution

Desired Behavior

Support one or more of the following approaches:

Option 1: disableSelection callback on grid

<sl-grid [items]="lessonFlows()" [disableSelection]="isRowDisabled"> </sl-grid>

isRowDisabled = (item: LessonFlow): boolean => {
  return item.status === 'PUBLISHED' || item.status === 'IN PROGRESS';
};

Option 2: disabled property on selection column

<sl-grid-selection-column [disabled]="isRowDisabled" [scopedElements]="{'sl-checkbox': Checkbox}" />

🔦 Context

Use Case

In our application, we need to display a grid of lesson flows where certain rows should not be selectable based on their status. For example:

• Rows with status: 'PUBLISHED' should be visible but not selectable
• Rows with status: 'IN PROGRESS' should be disabled from selection
• Only rows with status: 'DRAFT' or status: 'ERROR' should be selectable

This is a common pattern in data tables where items in certain states cannot be acted upon but still need to be visible for informational purposes.

💻 Examples

Attempted Solution: Custom Renderer (Doesn't Work)

We tried using a custom renderer on the sl-grid-selection-column to conditionally disable checkboxes:

TypeScript:

isDisabled(status: LessonFlowStatus): boolean {
  return status === 'PUBLISHED' || status === 'IN PROGRESS' || status === 'QUEUE';
}

selectionRenderer: GridColumnDataRenderer<LessonFlow> = (lessonFlow) => {
  const disabled = this.isDisabled(lessonFlow.status);
  return html`<sl-checkbox .disabled=${disabled}></sl-checkbox>`;
};

HTML:

<sl-grid [items]="lessonFlows()" [striped]="true">
  <sl-grid-selection-column [renderer]="selectionRenderer" [scopedElements]="{'sl-checkbox': Checkbox}" />
  <sl-grid-sort-column path="title" [header]="'common.title' | transloco" />
  <sl-grid-sort-column path="status" [header]="'lessonFlow.status' | transloco" />
  <!-- other columns -->
</sl-grid>

Result: The custom renderer is completely ignored by sl-grid-selection-column. None of the checkboxes are rendered with the disabled attribute, even though the renderer returns them as disabled. The grid renders its own checkboxes using its internal logic and ignores the custom renderer entirely.

Issues with this approach:

1. ❌ The renderer property on sl-grid-selection-column doesn't actually override the checkbox rendering
2. ❌ The selection column has its own internal rendering logic that cannot be customized
3. ❌ No way to intercept or modify the checkbox rendering for individual rows
4. ❌ The grid provides no mechanism to conditionally disable selection at the row level

This demonstrates that there is currently no way to disable row selection in sl-grid, even with custom renderers. The component needs built-in support for this functionality.

👤 Your name

Alex Riera

🧢 Your Product/Team

NPM

[jpzwarte]

@iErKy Can you elaborate on the usecase where you need this functionality? It would help us understand the request and the kind of API needed for this. Thanks!

[iErKy]

Hello @jpzwarte under Possible Solution section on the opening comment, you will find an explanation of the use case for which I need this functionality.