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

[docs] Migrate Getting Started section #255

Merged
merged 4 commits into from
Sep 10, 2020
Merged

[docs] Migrate Getting Started section #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
951d91f
[docs] Migrate the Rendering section
oliviertassinari Sep 6, 2020
645a006
Update docs/src/pages/components/data-grid/overview/overview.md
oliviertassinari Sep 6, 2020
50bb151
work on getting-started
oliviertassinari Sep 9, 2020
37828c0
Matt review
oliviertassinari Sep 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/public/static/x/header-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/static/x/watermark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 3 additions & 7 deletions docs/src/pages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,7 @@ const pages = [
{
pathname: '/components',
subheader: '/components/foo',
children: [
{ pathname: '/components/data-grid/getting-started' },
{ pathname: '/components/data-grid/rendering' },
],
children: [{ pathname: '/components/data-grid/rendering' }],
},
{
pathname: '/components',
Expand Down Expand Up @@ -145,10 +142,9 @@ const pages = [
pathname: '/components/data-grid',
title: 'Overview',
},
{ pathname: '/components/data-grid/404', title: '🚧 Getting Started' },
{ pathname: '/components/data-grid/getting-started' },
{ pathname: '/components/data-grid/columns' },
{ pathname: '/components/data-grid/rows' },
{ pathname: '/components/data-grid/404', title: '🚧 Data' },
{ pathname: '/components/data-grid/filtering', title: '🚧 Filtering' },
{ pathname: '/components/data-grid/pagination' },
{ pathname: '/components/data-grid/selection' },
Expand All @@ -164,7 +160,7 @@ const pages = [
pathname: '/components/data-grid',
title: 'Overview',
},
{ pathname: '/components/data-grid/getting-started', title: '🚧 Getting Started' },
{ pathname: '/components/data-grid/getting-started' },
{ pathname: '/components/data-grid/columns' },
{ pathname: '/components/data-grid/rows' },
{ pathname: '/components/data-grid/filtering', title: '🚧 Filtering' },
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/columns/columns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,15 +109,15 @@ const usdPrice: ColTypeDef = {
Grouping columns allows you to have multiple levels of columns in your header and the ability, if needed, to 'open and close' column groups to show and hide additional columns.

## 🚧 Column reorder
## 🚧 Column reorder ⚡️

> ⚠️ This feature isn't implemented yet. It's coming.
>
> 👍 Upvote [issue #194](https://github.com/mui-org/material-ui-x/issues/194) if you want to see it land faster.
Column reordering enables reordering the columns by dragging the header cells.

## 🚧 Sticky columns
## 🚧 Sticky columns ⚡️

> ⚠️ This feature isn't implemented yet. It's coming.
>
Expand Down
16 changes: 16 additions & 0 deletions docs/src/pages/components/data-grid/getting-started/Codesandbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';

export default function Codesandbox() {
return (
<iframe
title="codesandbox"
src="https://codesandbox.io/embed/d3ex9?hidenavigation=1&fontsize=14&view=preview"
style={{
width: '100%',
height: 400,
border: 0,
}}
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
/>
);
}
211 changes: 210 additions & 1 deletion docs/src/pages/components/data-grid/getting-started/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,213 @@ components: DataGrid, XGrid

# Data Grid - Getting started

<p class="description">Start</p>
<p class="description">The last React borned data grid you will need.</p>

## Installation

Using your favorite package manager, install `@material-ui/x-grid` for the full-featured enterprise grid, or `@material-ui/data-grid` for the free community version.

```sh
// with npm
npm install @material-ui/data-grid

// with yarn
yarn add @material-ui/data-grid
```

The grid has a peer dependency on Material-UI core components. If you are not already using Material-UI in your project, you can install it with:

```sh
// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core
```

## Quick start

First, you have to import the component as below.
To avoid name conflicts the component is named `XGrid` for the full-featured enterprise grid, and `DataGrid` for the free community version.

```js
import { DataGrid } from '@material-ui/data-grid';
```

### Define rows

Rows are key-value pair objects, mapping column names as keys with their values.
You should also provide an id on each row to allow delta updates and better performance.

Here is an example

```js
const rows: RowsProp = [
{ id: 1, col1: 'Hello', col2: 'World' },
{ id: 2, col1: 'XGrid', col2: 'is Awesome' },
{ id: 3, col1: 'Material-UI', col2: 'is Amazing' },
];
```

### Define columns

Comparable to rows, columns are objects defined with a set of attributes of the `ColDef` interface.
They are mapped to rows through their `field` property.

```tsx
const columns: ColDef[] = [
{ field: 'id', hide: true },
{ field: 'col1', headerName: 'Column 1', width: 150 },
{ field: 'col2', headerName: 'Column 2', width: 150 },
];
```

You can import `ColDef` to see all column properties.

### Demo

Putting it together, this all you need to get started, as you can see in this live and interactive demo:

```jsx
import React from 'react';
import { DataGrid, RowsProp, ColDef } from '@material-ui/data-grid';

const rows: RowsProp = [
{ id: 1, col1: 'Hello', col2: 'World' },
{ id: 2, col1: 'XGrid', col2: 'is Awesome' },
{ id: 3, col1: 'Material-UI', col2: 'is Amazing' },
];

const columns: ColDef[] = [
{ field: 'id', hide: true },
{ field: 'col1', headerName: 'Column 1', width: 150 },
{ field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
return (
<div style={{ height: 300, width: '100%' }}>
<DataGrid rows={rows} columns={columns} />
</div>
);
}
```

{{"demo": "pages/components/data-grid/getting-started/Codesandbox.js", "hideToolbar": true, "bg": true}}

## Enterprise

The data grid comes in 2 versions:

- `DataGrid` **MIT licensed** as part of the community edition. It's an extension of `@material-ui/core`.
- `XGrid` **Commercially licensed** as part of the X product line offering.

The features only available in the commercial version are suffixed with a <span style="font-size: 28px">⚡️</span> icon.

<img src="/static/x/header-icon.png" width="454" height="239" alt="">

### Try XGrid for free

You are free to try out `XGrid` as long as it's not used for a project intended for production.
Please take the component for a test run, no need to contact us.

### Invalid license

If you have an enterprise grid running with an invalid license (no license, expired license, incorrect license) the grid displays a watermark and a warning in the console.

<img src="/static/x/watermark.png" width="658" height="175" alt="">

### Feature comparison

The following table summarizes the features available in the community `DataGrid` and enterprise `XGrid` components. All the features of the community version are available in the enterprise one.

| | Community | Enterprise ⚡️ |
| --------------------------------------------------------------------------------------- | --------- | -------------- |
| **Column** | | |
| [Column resizing](/components/data-grid/columns/#column-sizing) | ❌ | ✅ |
| [Column groups](/components/data-grid/columns/#column-groups) | 🚧 | 🚧 |
| [Column reorder](/components/data-grid/columns/#column-reorder) | ❌ | 🚧 |
| [Column sticky](/components/data-grid/columns/#column-sticky) | ❌ | 🚧 |
| [Column spanning](/components/data-grid/columns/#column-spanning) | 🚧 | 🚧 |
| **Rows** | | |
| [Rows sorting](/components/data-grid/rows/#row-sorting) | ✅ | ✅ |
| [Rows height](/components/data-grid/rows/#row-height) | ✅ | ✅ |
| [Rows spanning](/components/data-grid/rows/#row-spanning) | 🚧 | 🚧 |
| [Rows reorder](/components/data-grid/rows/#row-reorder) | ❌ | 🚧 |
| **Selection** | | |
| [Row selection](/components/data-grid/selection/#single-row-selection) | ✅ | ✅ |
| [Multi-row selection](/components/data-grid/selection/#multiple-row-selection) | ❌ | ✅ |
| [Range selection](/components/data-grid/selection/#range-selection) | ❌ | 🚧 |
| **Filtering** | | |
| [Column filter](/components/data-grid/filtering/#column-filter) | 🚧 | 🚧 |
| [Quick filter](/components/data-grid/filtering/#quick-filter) | 🚧 | 🚧 |
| **Pagination** | | |
| [Pagination](/components/data-grid/pagination/) | ✅ | ✅ |
| [Pagination > 100 rows per page](/components/data-grid/pagination/) | ❌ | ✅ |
| **Editing** | | |
| [Row edition](/components/data-grid/editing/#row-editing) | 🚧 | 🚧 |
| [Cell editing](/components/data-grid/editing/#cell-editing) | 🚧 | 🚧 |
| **Import & export** | | |
| [CSV export](/components/data-grid/export/#csv-export) | 🚧 | 🚧 |
| [Print](/components/data-grid/export/#print) | 🚧 | 🚧 |
| [Excel export](/components/data-grid/export/#excel-export) | ❌ | 🚧 |
| [Clipboard](/components/data-grid/export/#clipboard) | ❌ | 🚧 |
| **Rendering** | | |
| [Column virtualization](/components/data-grid/rendering/#column-virtualization) | ✅ | ✅ |
| [Row virtualization > 100 rows](/components/data-grid/rendering/#column-virtualization) | ❌ | ✅ |
| [Components](/components/data-grid/rendering/#components) | ✅ | ✅ |
| **Group & Pivot** | | |
| [Tree data](/components/data-grid/group-pivot/#tree-data) | ❌ | 🚧 |
| [Master detail](/components/data-grid/group-pivot/#master-detail) | ❌ | 🚧 |
| [Grouping](/components/data-grid/group-pivot/#grouping) | ❌ | 🚧 |
| [Aggregation](/components/data-grid/group-pivot/#aggregation) | ❌ | 🚧 |
| [Pivoting](/components/data-grid/group-pivot/#pivoting) | ❌ | 🚧 |
| **Misc** | | |
| [Accessibility](/components/data-grid/accessibility/) | ✅ | ✅ |
| [Keyboard navigation](/components/data-grid/accessibility/#keyboard-navigation) | ✅ | ✅ |
| [Localization](/components/data-grid/localization/) | 🚧 | 🚧 |
| RTL | 🚧 | 🚧 |

### License key installation

Once you purchase a license, you'll receive a license key.
This key should be provided to the enterprise package to remove the watermark and
the warnings in the console.

```jsx
import { LicenseInfo } from '@material-ui/x-grid';

LicenseInfo.setLicenseKey(
'x0jTPl0USVkVZV0SsMjM1kDNyADM5cjM2ETPZJVSQhVRsIDN0YTM6IVREJ1T0b9586ef25c9853decfa7709eee27a1e',
);
```

The grid checks the key without making any network requests.

## Support

For crowdsourced technical questions from expert Material-UI devs in our community. Also frequented by the Material-UI core team.

[Post a question](https://stackoverflow.com/questions/tagged/material-ui)

### GitHub <img src="/static/images/logos/github.svg" width="24" height="24" alt="GitHub logo" loading="lazy" />

We use GitHub issues exclusively as a bug and feature request tracker. If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported or fixed](https://github.com/mui-org/material-ui-x/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed). You can search through existing issues and pull requests to see if someone has reported one similar to yours.

[Open an issue](https://github.com/mui-org/material-ui-x/issues/new/choose)

### StackOverflow <img src="/static/images/logos/stackoverflow.svg" width="24" height="24" alt="StackOverflow logo" loading="lazy" />

For crowdsourced technical questions from expert Material-UI devs in our community. Also frequented by the Material-UI core team.

[Post a question](https://stackoverflow.com/questions/tagged/material-ui)

### Enterprise support

We provide a [private support channel](https://material-ui.zendesk.com/) for enterprise customers.

### Roadmap

Here is [the public roadmap](https://github.com/mui-org/material-ui-x/projects/1). It's organized by quarter.

> ⚠️ Disclaimer: We operate in a dynamic environment, and things are subject to change. The information provided is intended to outline the general framework direction, for informational purposes only. We may decide to add or remove new items at any time, depending on our capability to deliver while meeting our quality standards. The development, releases, and timing of any features or functionality remains at the sole discretion of Material-UI. The roadmap does not represent a commitment, obligation, or promise to deliver at any time.
6 changes: 3 additions & 3 deletions docs/src/pages/components/data-grid/group-pivot/group-pivot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@ components: DataGrid, XGrid

<p class="description">Explore and analyse in depth the grid data.</p>

## 🚧 Tree data
## 🚧 Tree data ⚡️

> ⚠️ This feature isn't implemented yet. It's coming.
>
> 👍 Upvote [issue #210](https://github.com/mui-org/material-ui-x/issues/210) if you want to see it land faster.
Tree data allows to visualize self-referential hierarchical (tree-like structure) data.

## 🚧 Master detail
## 🚧 Master detail ⚡️

> ⚠️ This feature isn't implemented yet. It's coming.
>
> 👍 Upvote [issue #211](https://github.com/mui-org/material-ui-x/issues/211) if you want to see it land faster.
The feature allows to display row details on an expandable pane.

## 🚧 Grouping
## 🚧 Grouping ⚡️

> ⚠️ This feature isn't implemented yet. It's coming.
>
Expand Down
7 changes: 5 additions & 2 deletions docs/src/pages/components/data-grid/overview/DataGridDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,15 @@ const rows = [
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

export default function DataGridDemo() {
return (
<div style={{ width: '100%', height: 450 }}>
<DataGrid rows={rows} columns={columns} checkboxSelection />
<div style={{ width: '100%', height: 400 }}>
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
</div>
);
}
7 changes: 5 additions & 2 deletions docs/src/pages/components/data-grid/overview/DataGridDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,15 @@ const rows = [
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

export default function DataGridDemo() {
return (
<div style={{ width: '100%', height: 450 }}>
<DataGrid rows={rows} columns={columns} checkboxSelection />
<div style={{ width: '100%', height: 400 }}>
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
</div>
);
}
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/overview/XGridDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function XGridDemo() {
});

return (
<div style={{ width: '100%', height: 450 }}>
<div style={{ width: '100%', height: 520 }}>
<XGrid
{...data}
loading={data.rows.length === 0}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/overview/XGridDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function XGridDemo() {
});

return (
<div style={{ width: '100%', height: 450 }}>
<div style={{ width: '100%', height: 520 }}>
<XGrid
{...data}
loading={data.rows.length === 0}
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/overview/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ import { DataGrid } from '@material-ui/data-grid';

{{"demo": "pages/components/data-grid/overview/DataGridDemo.js", "defaultCodeOpen": false}}

### Commercial version
### Commercial version ⚡️

The following grid displays 31 columns and 100,000 rows, it's over 3 million cells.
The following grid displays 31 columns and 100,000 rows - over 3 million cells in total.

```js
import { XGrid } from '@material-ui/x-grid';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/rows/rows.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ Row spanning allows to change this default behavior.
It allows cells to span multiple rows.
This is very close to the "row spanning" in an HTML `<table>`.

## 🚧 Row reorder
## 🚧 Row reorder ⚡️

> ⚠️ This feature isn't implemented yet. It's coming.
>
Expand Down
Loading