React Tables and Grids

Accessible table and grid examples in React

This project was bootstrapped with Create React App and Storybook.

You can find the hosted Storybook app here: http://tylerhawkins.info/tables-and-grids/storybook-dist

Running the App Locally

You can run the app locally by simply cloning the repo, running yarn install, and then running yarn start. This will start the Storybook app and open it in your browser.

Available Scripts

In the project directory, you can run:

• build: Builds the Storybook app
• eject: Ejects the app from using react-scripts
• format: Formats the code using Prettier
• format-watch: Formats the code using Prettier in watch mode
• start: Starts the Storybook app in development mode
• test: Runs the tests in watch mode

Resources

• WAI-ARIA Authoring Practices - Table: https://www.w3.org/TR/wai-aria-practices-1.1/#table
• Example of a table made out of divs and spans: https://www.w3.org/TR/wai-aria-practices-1.1/examples/table/table.html
• WAI-ARIA Authoring Practices - Grid: https://www.w3.org/TR/wai-aria-practices-1.1/#grid
• ARIA roles and attributes for grids: https://www.w3.org/TR/wai-aria-practices-1.1/#grid_roles_states_props
• Grid examples: https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html