-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
0fdfac2
commit 8773d61
Showing
4 changed files
with
71 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
packages/storybook/src/documentation/pages/accessibility.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { XGrid } from '@material-ui/x-grid'; | ||
|
||
<Meta title="1. Docs/12. Accessibility" component={XGrid} /> | ||
|
||
# Accessibility | ||
|
||
Throughout our journey, accessibility has always been one of the core value of Material-UI components. | ||
Hence the data-grid has no less than 70 accessibility standards implemented in our first beta version. | ||
|
||
## Keyboard navigation | ||
|
||
| Keys | Description | | ||
| ---------------------------------------: | :------------------------------------------------ | | ||
| <kbd>Tab</kbd> | Navigate between selectable elements | | ||
| <kbd>Arrow Left</kbd> | Navigate between cell elements | | ||
| <kbd>Arrow Bottom</kbd> | Navigate between cell elements | | ||
| <kbd>Arrow Right</kbd> | Navigate between cell elements | | ||
| <kbd>Arrow Up</kbd> | Navigate between cell elements | | ||
| <kbd>Home</kbd> | Navigate to the first cell of the current row | | ||
| <kbd>End</kbd> | Navigate to the last cell of the current row | | ||
| <kbd>CMD/CTRL + Home</kbd> | Navigate to the first cell of the first row | | ||
| <kbd>CMD/CTRL + End</kbd> | Navigate to the last cell of the last row | | ||
| <kbd>Shift + Space</kbd> | Select the current row | | ||
| <kbd>Shift + Space + Arrow Up/Down</kbd> | Select the current row and the row above or below | | ||
| <kbd>Space</kbd> | Navigate to the next scrollable page | | ||
| <kbd>Page Up</kbd> | Navigate to the next scrollable page | | ||
| <kbd>Page Down</kbd> | Navigate to the previous scrollable page | | ||
| <kbd>CMD/CTRL + A</kbd> | Select all rows | | ||
| <kbd>CMD/CTRL + C</kbd> | Copy the currently selected row | |
39 changes: 39 additions & 0 deletions
39
packages/storybook/src/documentation/pages/overview.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { XGrid } from '@material-ui/x-grid'; | ||
import QuickStartDemo from './demos/quick-start.demo'; | ||
|
||
<Meta title="1. Docs/0. Overview" component={XGrid} /> | ||
|
||
# Overview | ||
|
||
The Data Grid component is designed to display and analyze tabular data. It leverages the power of React and TypeScript, to provide the best UX, while manipulating an unlimited set of data. | ||
As one of our X advanced component series, it comes with an intuitive API for real-time updates, accessibility, as well as theming and custom templates, all with blazing fast performance. | ||
|
||
## Preview | ||
|
||
Check out our demo ** [here](https://muix-preview.netlify.app/#/grid)**. | ||
|
||
//TODO PUT Small Commodity grid here?? | ||
|
||
## Features | ||
|
||
- **Virtualization** is used to display an unlimited set of elements, without cluttering the DOM. Therefore you can set 1000s of rows or columns. | ||
- **Sorting** can be applied on a single or multiple columns. | ||
- **Selection** brings user interaction in play and lets you manipulate a small set of data. | ||
- **Templating** will let you render rich components for better data analysis. | ||
- **Pagination** let you split your dataset or API request to avoid overloading your backend. | ||
- **API** for the advanced users that needs to manipulate the component, outside the react component props. Great for real-time updates and streaming applications. | ||
- **Theming** to make it your own. | ||
|
||
Of course, we have more on the pipeline, check our roadmap here for more info. | ||
|
||
## Licenses | ||
|
||
It comes in 2 versions. | ||
|
||
- DataGrid. **MIT** license as part of our core package | ||
- XGrid. **Commercial** License as part of our X package. More here | ||
|
||
## Support | ||
|
||
- We provide **Enterprise Support** for all our X component series. Please contact us for more info | ||
- We keep supporting our core components through all our dedicated channel. Github, twitter... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters