Skip to content

Commit

Permalink
work on getting-started
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Sep 9, 2020
1 parent 645a006 commit 680a1a3
Show file tree
Hide file tree
Showing 11 changed files with 235 additions and 288 deletions.
Binary file added docs/public/static/x/header-icon.png
View file
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
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
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
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
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
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 the 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 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 bugs and feature requests 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 for the enterprsie customer on [Zendesk](https://material-ui.zendesk.com/).

### Roadmap

You can find our public roadmap on this [GitHub project](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. It's intended for informational purposes only. We may decide to add/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 of Material-UI 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
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
2 changes: 1 addition & 1 deletion docs/src/pages/components/data-grid/rows/rows.md
View file
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

0 comments on commit 680a1a3

Please sign in to comment.