Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add tdsClick event to table rows #760

Closed
wants to merge 31 commits into from
Closed

feat: add tdsClick event to table rows #760

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
25666ed
feat: add tdsClick event to table rows
ckrook Sep 17, 2024
c974426
fix(card): toggle stretch mode (#753)
mistermalm Sep 18, 2024
8ff5359
Release of @scania/[email protected] (#761)
github-actions[bot] Sep 19, 2024
91eef3d
Revert "fix(table): passing on unit value with horizontalscroll (#736…
timrombergjakobsson Sep 19, 2024
16d80b4
fix(table): horizontal scroll broken (#763)
timrombergjakobsson Sep 23, 2024
c650709
Release of @scania/[email protected] (#767)
github-actions[bot] Sep 23, 2024
e577495
feat: make table tabable by adding clickable prop
ckrook Sep 24, 2024
4210741
fix: add readme which was added after build
ckrook Sep 24, 2024
d974788
Update packages/core/src/components/table/table-body-row/table-body-r…
ckrook Sep 24, 2024
8b59cca
chore: cleanup console.log
ckrook Sep 24, 2024
3c51201
chore: bump versions (#770)
mistermalm Sep 25, 2024
a27ad63
chore: update package-lock files for version bump 1.15.0 (#772)
nathalielindqvist Sep 25, 2024
ee611c5
feat(table): pagination improvements (#775)
Lunkan89 Oct 1, 2024
3a6af6c
build(deps): bump send and express in /packages/angular (#754)
dependabot[bot] Oct 2, 2024
3a60f56
build(deps): bump body-parser and express in /packages/core (#755)
dependabot[bot] Oct 2, 2024
2902ab3
build(deps): bump rollup from 4.20.0 to 4.22.4 in /packages/angular-1…
dependabot[bot] Oct 2, 2024
e507f52
build(deps): bump rollup from 2.79.1 to 2.79.2 in /packages/angular (…
dependabot[bot] Oct 2, 2024
5c3b771
feat: add the possibility to flex expanded row in table (#765)
ckrook Oct 2, 2024
5b69f5a
build(deps): bump webpack and @angular-devkit/build-angular (#781)
dependabot[bot] Oct 2, 2024
e8ba3e6
feat(table): zebra rows & columns (#774)
theJohnnyMe Oct 3, 2024
5a66510
fix: added storybook notes and input (#782)
Lunkan89 Oct 3, 2024
9bfbb74
fix: pr template improvements (#780)
Lunkan89 Oct 3, 2024
869b5a0
Release of @scania/[email protected] (#783)
github-actions[bot] Oct 3, 2024
63a5a9f
chore: update tegel dependencies in wrapper packages (#784)
nathalielindqvist Oct 7, 2024
f121d4d
feat: add tdsClick event to table rows
ckrook Sep 17, 2024
e122946
feat: make table tabable by adding clickable prop
ckrook Sep 24, 2024
afab82e
fix: add readme which was added after build
ckrook Sep 24, 2024
5d8956a
Update packages/core/src/components/table/table-body-row/table-body-r…
ckrook Sep 24, 2024
ddab2b9
chore: cleanup console.log
ckrook Sep 24, 2024
cedbe76
Merge branch 'feat/tds-table-row-click-event' of https://github.com/s…
ckrook Oct 8, 2024
14b56fe
refactor: change variable from constant to let
ckrook Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions packages/core/src/components/table/table-body-row/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,18 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------ | --------- | ------- |
| `disabled` | `disabled` | Marks the row as disabled, used for multiselect table. | `boolean` | `false` |
| `selected` | `selected` | Marks the row as selected, used for multiselect table. | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ---------------------------------------------------------------- | --------- | ------- |
| `clickable` | `clickable` | Makes the row clickable and tabbable for accessibility purposes. | `boolean` | `false` |
| `disabled` | `disabled` | Marks the row as disabled, used for multiselect table. | `boolean` | `false` |
| `selected` | `selected` | Marks the row as selected, used for multiselect table. | `boolean` | `false` |


## Events

| Event | Description | Type |
| ----------- | ------------------------------------------------ | -------------------------------------------------------------------------- |
| `tdsClick` | Event emitted when a row is clicked. | `CustomEvent<{ tableId: string; rowIndex: number; }>` |
| `tdsSelect` | Event emitted when a row is selected/deselected. | `CustomEvent<{ tableId: string; checked: boolean; selectedRows: any[]; }>` |


Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/components/table/table-body-row/table-body-row.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,11 @@
border-right: 1px solid var(--tds-table-divider);
}
}

:host(.tds-table__row--clickable) {
cursor: pointer;
}

:host(.tds-table__row--clickable:focus-visible) {
outline: var(--focus-outline, 2px solid blue);
}
Comment on lines +68 to +70
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To answer your question about style of focus state:
Instead, you can use mixin from packages/core/src/mixins/_focus-state.scss.

35 changes: 35 additions & 0 deletions packages/core/src/components/table/table-body-row/table-body-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ export class TdsTableBodyRow {
/** Marks the row as disabled, used for multiselect table. */
@Prop({ reflect: true }) disabled?: boolean = false;

/** Makes the row clickable and tabbable for accessibility purposes. */
@Prop({ reflect: true }) clickable: boolean = false;

@State() multiselect: boolean = false;

@State() mainCheckBoxStatus: boolean = false;
Expand Down Expand Up @@ -61,6 +64,18 @@ export class TdsTableBodyRow {
selectedRows: any[];
}>;

/** Event emitted when a row is clicked. */
@Event({
eventName: 'tdsClick',
composed: true,
cancelable: false,
bubbles: true,
})
tdsClick: EventEmitter<{
tableId: string;
rowIndex: number;
}>;

async handleCheckboxChange(event) {
this.selected = event.detail.checked;
this.tdsSelect.emit({
Expand All @@ -70,6 +85,22 @@ export class TdsTableBodyRow {
});
}

handleRowClick() {
const rowIndex = Array.from(this.host.parentElement.children).indexOf(this.host);

this.tdsClick.emit({
tableId: this.tableId,
rowIndex: rowIndex,
});
}

handleKeyDown(e) {
if (this.clickable && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault();
this.handleRowClick();
}
}

@Listen('internalTdsTablePropChange', { target: 'body' })
internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>) {
if (this.tableId === event.detail.tableId) {
Expand Down Expand Up @@ -98,12 +129,16 @@ export class TdsTableBodyRow {
render() {
return (
<Host
tabindex={this.clickable ? '0' : null}
class={{
'tds-table__row': true,
'tds-table__row--selected': this.selected,
'tds-table__compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
'tds-table__row--clickable': this.clickable,
}}
onClick={() => this.handleRowClick()}
onKeyDown={(e) => this.handleKeyDown(e)}
>
{this.multiselect && (
<td class="tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table">
Expand Down
140 changes: 55 additions & 85 deletions packages/core/src/components/table/table-component-basic.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,16 @@ export default {
},
if: { arg: 'noMinWidth', eq: true },
},
clickable: {
name: 'Clickable rows',
description: 'Enables rows to be clickable and emit `tdsClick` events.',
control: {
type: 'boolean',
},
table: {
defaultValue: { summary: false },
},
},
},
args: {
modeVariant: 'Inherit from parent',
Expand All @@ -190,6 +200,7 @@ export default {
column2Width: '',
column3Width: '',
column4Width: '',
clickable: false,
},
};

Expand All @@ -208,6 +219,7 @@ const BasicTemplate = ({
column2Width,
column3Width,
column4Width,
clickable,
}) =>
formatHtmlPreview(`
<tds-table
Expand All @@ -233,91 +245,49 @@ const BasicTemplate = ({
} text-align="${headerTextAlignment}"></tds-header-cell>
</tds-table-header>
<tds-table-body>
<tds-table-body-row>
<tds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
</tds-table-body-row>
<tds-table-body-row>
<tds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
</tds-table-body-row>
<tds-table-body-row>
<tds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
</tds-table-body-row>
<tds-table-body-row>
<tds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
</tds-table-body-row>
<tds-table-body-row>
<tds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
</tds-table-body-row>
<tds-table-body-row>
<tds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
</tds-table-body-row>
${[...Array(6)]
.map(
(_, index) => `
<tds-table-body-row ${clickable ? 'clickable' : ''}>
<tds-body-cell cell-value="Test value ${
index % 2 === 0 ? '1' : '5'
}" cell-key="truck" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value ${
index % 2 === 0 ? '2' : '6'
}" cell-key="driver" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value ${
index % 2 === 0 ? '3' : '7'
}" cell-key="country" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
<tds-body-cell cell-value="Test value ${
index % 2 === 0 ? '4' : '8'
}" cell-key="mileage" disable-padding="${disablePadding}" ${
cellTextAlignment ? `text-align="${cellTextAlignment}"` : ''
}></tds-body-cell>
</tds-table-body-row>
`,
)
.join('')}
</tds-table-body>
</tds-table>`);
</tds-table>

<!-- The script below is just for demo purposes -->
<script>
// Select all rows
const rows = document.querySelectorAll('tds-table-body-row');
ckrook marked this conversation as resolved.
Show resolved Hide resolved

// Add event listener to all rows
rows.forEach(row => {
row.addEventListener('tdsClick', (event) => {
console.log('Row clicked:', event.detail);
});
});
</script>
`);

export const Basic = BasicTemplate.bind({});
Loading