created:4/29/2021
updated:5/20/2021
loc
281
comments
20%
passed
24
coverage
64%

Table

avatar of atanasster

Table component using react-table to display the data. Can be grouped, filtered, sorted. Themed with theme-ui for consistency.

Tests results

Status
Full name
Title
Time(ms)
Table.test.ts(24 tests)
passed
Table > overview
snapshot
192
passed
Table > overview
accessibility
486
passed
Table > noHeader
snapshot
62
passed
Table > noHeader
accessibility
255
passed
Table > sortable
snapshot
101
passed
Table > sortable
accessibility
537
passed
Table > filterable
snapshot
118
passed
Table > filterable
accessibility
559
passed
Table > grouping
snapshot
72
total 24 tests

Tests coverage

Kind
Total
Covered
Skipped
%
Table.tsx
lines
51
50
0
98.03%
functions
11
7
0
63.63%
statements
57
56
0
98.24%
branches
41
34
0
82.92%

A11y tests

Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
 
id
description
aria-allowed-role

Ensures role attribute has an appropriate value for the element...

aria-required-attr

Ensures elements with ARIA roles have all required ARIA attributes...

aria-required-children

Ensures elements with an ARIA role that require child roles contain them...

aria-required-parent

Ensures elements with an ARIA role that require parent roles are contained by them...

aria-roles

Ensures all elements with a role attribute use a valid value...

avoid-inline-spacing

Ensure that text spacing set through style attributes can be adjusted with custom stylesheets...

color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

table-duplicate-name

Ensure the <caption> element does not contain the same text as the summary attribute...

td-headers-attr

Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table...

th-has-data-cells

Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe...

Viewport

Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
320px
Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
375px
Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
768px
Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
1024px