angular / angular/components

feat(table): add ability to customize the CSS class generation for columns

Open
#24,092 3 comments 2 reactions 0 assignees View on GitHub
area: cdk/table feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

Currently, if we have column say, `bankAccount`, the generated class name would be `cdk-column-bankAccount`/`mat-column-bankAccount`, but then when I use this kind of selector in my scss, I get some lint warnings, as we're supposed to use kebab-case, not camelCase... so we have to keep silencing the warnings everytime we have to do this. What we want to propose is to have an option to customize this css class generation (if possibly, globally).

### Use Case

We want to control my table styles without relying on camelCased selectors.

So, instead of this:

https://github.com/angular/components/blob/59002e1649123922df3532f4be78c485a73c5bc1/src/cdk/table/cell.ts#L144

We'd love to have an option to implement my own css class generator.

Contributor guide

Open the contributing guide

Research direction

Start by reading the class-generation code linked in `src/cdk/table/cell.ts` and the issue’s use case. The requested outcome is an option, possibly global, to customize generated column CSS classes; the issue does not specify its API or tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.