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

fix: add rowgroup to tables #5005

Merged
merged 2 commits into from Nov 28, 2023
Merged

fix: add rowgroup to tables #5005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f0ef52
fix: add rowgroup to tables
deboer-tim Nov 27, 2023
8aa6bdd
chore: add test
deboer-tim Nov 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 19 additions & 0 deletions packages/renderer/src/lib/table/Table.spec.ts
View file
Open in desktop
Expand Up @@ -175,3 +175,22 @@ test('Expect correct aria roles', async () => {
expect(cells.length).toBe(5);
}
});

test('Expect rowgroups', async () => {
render(TestTable, {});

// there should be two role groups
const rowgroups = await screen.findAllByRole('rowgroup');
expect(rowgroups).toBeDefined();
expect(rowgroups.length).toBe(2);

// one for the header row
const headers = await within(rowgroups[0]).findAllByRole('columnheader');
expect(headers).toBeDefined();
expect(headers.length).toBe(5);

// and one for the data rows
const dataRows = await within(rowgroups[1]).findAllByRole('row');
expect(dataRows).toBeDefined();
expect(dataRows.length).toBe(3);
});
106 changes: 55 additions & 51 deletions packages/renderer/src/lib/table/Table.svelte
View file
Open in desktop
Expand Up @@ -123,70 +123,74 @@ function setGridColumns() {

<div class="w-full" class:hidden="{data.length === 0}" role="table">
<!-- Table header -->
<div
class="grid grid-table gap-x-0.5 mx-5 h-7 sticky top-0 bg-charcoal-700 text-xs text-gray-600 font-bold uppercase z-[2]"
role="row">
<div class="whitespace-nowrap justify-self-start" role="columnheader"></div>
{#if row.info.selectable}
<div class="whitespace-nowrap place-self-center" role="columnheader">
<Checkbox
title="Toggle all"
bind:checked="{selectedAllCheckboxes}"
indeterminate="{selectedItemsNumber > 0 && !selectedAllCheckboxes}"
on:click="{event => toggleAll(event.detail)}" />
</div>
{/if}
{#each columns as column}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-interactive-supports-focus -->
<div
class="whitespace-nowrap {column.info.align === 'right'
? 'justify-self-end'
: column.info.align === 'center'
? 'justify-self-center'
: 'justify-self-start'} self-center"
on:click="{() => sort(column)}"
role="columnheader">
{column.title}{#if column.info.comparator}<i
class="fas pl-0.5"
class:fa-sort="{sortCol !== column}"
class:fa-sort-up="{sortCol === column && sortAscending}"
class:fa-sort-down="{sortCol === column && !sortAscending}"
class:text-charcoal-200="{sortCol !== column}"
aria-hidden="true"></i
>{/if}
</div>
{/each}
</div>
<!-- Table body -->
{#each data as object (object)}
<div role="rowgroup">
<div
class="grid grid-table gap-x-0.5 mx-5 h-12 bg-charcoal-800 hover:bg-zinc-700 rounded-lg mb-2"
animate:flip="{{ duration: 300 }}"
class="grid grid-table gap-x-0.5 mx-5 h-7 sticky top-0 bg-charcoal-700 text-xs text-gray-600 font-bold uppercase z-[2]"
role="row">
<div class="whitespace-nowrap justify-self-start" role="cell"></div>
<div class="whitespace-nowrap justify-self-start" role="columnheader"></div>
{#if row.info.selectable}
<div class="whitespace-nowrap place-self-center" role="cell">
<div class="whitespace-nowrap place-self-center" role="columnheader">
<Checkbox
title="Toggle {kind}"
bind:checked="{object.selected}"
disabled="{!row.info.selectable(object)}"
disabledTooltip="{row.info.disabledText}" />
title="Toggle all"
bind:checked="{selectedAllCheckboxes}"
indeterminate="{selectedItemsNumber > 0 && !selectedAllCheckboxes}"
on:click="{event => toggleAll(event.detail)}" />
</div>
{/if}
{#each columns as column}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-interactive-supports-focus -->
<div
class="whitespace-nowrap {column.info.align === 'right'
? 'justify-self-end'
: column.info.align === 'center'
? 'justify-self-center'
: 'justify-self-start'} self-center overflow-hidden max-w-full"
role="cell">
{#if column.info.renderer}
<svelte:component this="{column.info.renderer}" object="{object}" />
{/if}
: 'justify-self-start'} self-center"
on:click="{() => sort(column)}"
role="columnheader">
{column.title}{#if column.info.comparator}<i
class="fas pl-0.5"
class:fa-sort="{sortCol !== column}"
class:fa-sort-up="{sortCol === column && sortAscending}"
class:fa-sort-down="{sortCol === column && !sortAscending}"
class:text-charcoal-200="{sortCol !== column}"
aria-hidden="true"></i
>{/if}
</div>
{/each}
</div>
{/each}
</div>
<!-- Table body -->
<div role="rowgroup">
{#each data as object (object)}
<div
class="grid grid-table gap-x-0.5 mx-5 h-12 bg-charcoal-800 hover:bg-zinc-700 rounded-lg mb-2"
animate:flip="{{ duration: 300 }}"
role="row">
<div class="whitespace-nowrap justify-self-start" role="cell"></div>
{#if row.info.selectable}
<div class="whitespace-nowrap place-self-center" role="cell">
<Checkbox
title="Toggle {kind}"
bind:checked="{object.selected}"
disabled="{!row.info.selectable(object)}"
disabledTooltip="{row.info.disabledText}" />
</div>
{/if}
{#each columns as column}
<div
class="whitespace-nowrap {column.info.align === 'right'
? 'justify-self-end'
: column.info.align === 'center'
? 'justify-self-center'
: 'justify-self-start'} self-center overflow-hidden max-w-full"
role="cell">
{#if column.info.renderer}
<svelte:component this="{column.info.renderer}" object="{object}" />
{/if}
</div>
{/each}
</div>
{/each}
</div>
</div>