skip to main content
skip to navigation sidebar
skip to context sidebar
A next-generation tool to create blazing-fast documentation sites
API
Blog
Tutorial
Showcase
twitter
github
Edit this page
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.

Pagination

Age
Name
User Name
Street
City
Zip Code
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Total: 20 records

Test data

select
#
totalCountVisible
totalCountTemplate
pageIndex
pageSize
pageTemplate
pageVisible
pageSizeTemplate
pageSizeVisible
goToPageVisible
goToPageTemplate
1
Johnny Oberbrunner
0
7
Ms. Alysha Daniel
Kane Ortiz
Ronny Spinka
2
Lemuel Kris
1
5
Scot Kuhic
Karley Trantow
Miss Glenda Veum
3
Jennings Carter
0
20
Mrs. Meagan Pollich
Mr. Laura Muller
Petra Schmitt
4
Joy Crooks
1
8
Eloise Langworth
Giovani Koelpin
Herman Bechtelar
5
Cornell Haag
0
13
Vicky Parisian
Dewitt Ferry III
Roy Toy V
5 data rows

Controls

Name
Description
Default
Controls
totalCountVisible
boolean
true
totalCountTemplate
text
Total: ${totalData} records
pageIndex
number
0
pageSize
number
10
pageTemplate
text
Page ${pageIndex} of ${pageLength}
pageVisible
boolean
false
pageSizeTemplate
text
${pageSize} rows
pageSizeVisible
boolean
false
goToPageVisible
boolean
false
goToPageTemplate
text
Go to page:

Tests results

Status
Full name
Title
Time(ms)
Table.test.ts(24 tests)
passed
Table > overview
snapshot
204
passed
Table > overview
accessibility
579
passed
Table > noHeader
snapshot
56
passed
Table > noHeader
accessibility
278
passed
Table > sortable
snapshot
114
passed
Table > sortable
accessibility
653
passed
Table > filterable
snapshot
123
passed
Table > filterable
accessibility
544
passed
Table > grouping
snapshot
101
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

Age
Name
User Name
Street
City
Zip Code
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Total: 20 records
 
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...

empty-table-header

Ensures table headers have discernible text...

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

Age
Name
User Name
Street
City
Zip Code
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Total: 20 records
320px
Age
Name
User Name
Street
City
Zip Code
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Total: 20 records
375px
Age
Name
User Name
Street
City
Zip Code
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Total: 20 records
768px
Age
Name
User Name
Street
City
Zip Code
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Total: 20 records
1024px
Previous
Components/SyntaxHighlighter
Next
Components/Tabs