work on getting-started

docs/src/pages.js

@@ -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',
@@ -145,7 +142,7 @@ 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' },
@@ -164,7 +161,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' },

docs/src/pages/components/data-grid/getting-started/Codesandbox.js

@@ -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: 380,
+        border: 0,
+      }}
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+    />
+  );
+}

docs/src/pages/components/data-grid/getting-started/getting-started.md

@@ -5,4 +5,116 @@ 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}}
+
+## Community vs. 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
+
+It is 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.
+
+### Feature comparison
+
+### License key