add doc structure and example

packages/storybook/src/docs/api.stories.mdx

@@ -2,7 +2,7 @@ import { Grid } from '@material-ui/x-grid';
 
 <Meta title="1. Docs/10. Api" component={Grid} />
 
-# Api
+# Interface / Api
 
 Generated?
 

packages/storybook/src/docs/columns.stories.mdx

@@ -1,16 +1,110 @@
 import { Grid } from '@material-ui/x-grid';
+import {ColumnTypesDemo, HideColumnDemo, ValueGetterDemo, FormattingDemo} from './demos/columns.demo'
 
 <Meta title="1. Docs/2. Columns" component={Grid} />
 
 # Columns
 
+After importing XGrid or DataGrid, you're now ready to use the component in your JSX, and configure your grid columns.
+Todo that, you need to define the columns property of the component as below.
+If you use Typescript, you can enforce the typing and define the prop with 'Columns' or 'ColDef[]' type.
+
+```typescript jsx
+const columns: Columns = [
+    {
+        field: 'columnId', headerName: 'My Column Id', description: 'Something about this grid is amazing!', width: 100, sortable: true, type: 'number'
+    }
+]
+```
+In the code above we define a column with some of the basic attributes.
+- `field` is a mandatory field and is used to identify the corresponding value on rows. It's similar to an id, but has to be a string.
+- `headerName` is the title visible in the grid column header. If not set, `field` will be used in the header.
+- `description` is the description of the column, that will be displayed in a tooltip if the column header is too small to render the full column title.
+- `width` is the width the column will be when the component has mounted
+- `sortable` is an optional boolean that allows to make the column sortable.
+- `type` is the type of the column, *more on this one below*.
+
+The full list of column option is defined in the `ColDef` interface and can be found here (TODO add link to ColDef generated doc)
+
+## Column types
+
+To facilitate column configuration, we've defined some column types which act as a preset of column definition.
+By default, columns are considered string and thus the default column string type will be applied.
+That means, column sorting will use the string comparator, the column content will be aligned to the left side of the cell...
+
+We have built-in the following types
+ - string
+ - number
+ - date
+ - dateTime
+
+To apply a column type, you just need to define the `type` property in your column definition.
+```typescript jsx
+const columns: Columns = [
+  { field: 'name', type: 'string' },
+  { field: 'age', type: 'number' },
+  { field: 'dateCreated', type: 'date' },
+  { field: 'lastLogin', type: 'dateTime' },
+]
+```
+In the code above, we are defining 4 columns, and just by applying a type, each column will be sortable with the correct comparator for its type.
+We also added locale formatting for date, dateTime, and number Columns.
+
+<ColumnTypesDemo />
+<br />
+
+### Extending col type? Adding new col type?
+
+## Hiding
+Hiding a column is pretty straightforward, you just need to toggle the `hide` attribute of the column definition.
+```typescript jsx
+const columns: Columns = [
+  { field: 'hiddenCol', hide: true },
+]
+```
+<HideColumnDemo />
+
 ## Sizing
 
+To define the size of a column, you can use the `width` attribute available in ColDef. You can also resize the column, using the column resize separator icon, available on the column header. If you would like to block the resizing of a column, you can do by setting the resizable prop to false.
+
+```typescript jsx
+const columns: Columns = [
+  { field: 'largeCol', width: 200 },
+  { field: 'unresizableCol', width: 200, resizable: false }
+]
+```
+## Getting values
+Sometimes a column might not have a corresponding value and you just want to render a combination of different field.
+To do that, you can set the `valueGetter` attribute of `ColDef` as in the example below.
+
+ ```typescript jsx
+ const columns: Columns = [
+   { field: 'firstName'},
+   { field: 'lastName' },
+   { field: 'fullName', valueGetter: ({data})=> `${data.firstName} ${data.lastName}` }
+ ]
+ ```
+- `ValueGetter` is a function of type `(params: ValueGetterParams) => CellValue;`, therefore you can destructure `params` to get all the row data as in the example above.
+TODO Api ref the valueGetter interface here!
+
+<ValueGetterDemo />
+
 ## Formatting
+Formatting data before rendering is a common task, it is used in our built in `date` or `dateTime` column types, to apply local formatting to dates.
+
+ ```typescript jsx
+ const columns: Columns = [
+   { field: 'date', headerName: 'Year'  valueFormatter: ({value})=> value.getFullYear() }
+ ]
+ ```
+ - `valueFormatter` is a function of type `(params: ValueFormatterParams) => CellValue;`, therefore you can destructure `params` to get the column value as in the example above.
+ TODO Api ref the valueFormatter interface here!
+
+<FormattingDemo />
 
 ## Styling
 
-## Hiding
 
 ## Options
 

packages/storybook/src/docs/demos/columns.demo.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import { Columns, Grid, RowsProp } from '@material-ui/x-grid';
+import { useCallback, useMemo, useState } from 'react';
+import { randomCreatedDate, randomUpdatedDate } from '@material-ui/x-grid-data-generator';
+import { Button } from '@material-ui/core';
+import {CellValue} from "@material-ui/x-grid-modules/dist/src";
+
+export const ColumnTypesDemo = () => {
+  const columns: Columns = useMemo(
+    () => [
+      { field: 'id', hide: true },
+      { field: 'name', type: 'string' },
+      { field: 'age', type: 'number' },
+      { field: 'dateCreated', type: 'date', width: 180 },
+      { field: 'lastLogin', type: 'dateTime', width: 180 },
+    ],
+    [],
+  );
+
+  const rows: RowsProp = useMemo(
+    () => [
+      {
+        id: 1,
+        name: 'Damien',
+        age: 25,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+      {
+        id: 2,
+        name: 'Nicolas',
+        age: 36,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+      {
+        id: 3,
+        name: 'Kate',
+        age: 19,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+      {
+        id: 4,
+        name: 'Sebastien',
+        age: 28,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+      {
+        id: 5,
+        name: 'Louise',
+        age: 23,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+    ],
+    [],
+  );
+
+  //TODO use XGrid when published
+  return (
+    <div style={{ width: 800, height: 500 }}>
+      <Grid rows={rows} columns={columns} options={{ hideFooter: true }} />
+    </div>
+  );
+};
+
+export const HideColumnDemo = () => {
+  const [columns, setColumns] = useState<Columns>([
+    { field: 'id', hide: true },
+    { field: 'name', type: 'string' },
+    { field: 'age', type: 'number' },
+    { field: 'dateCreated', type: 'date', width: 180 },
+    { field: 'lastLogin', type: 'dateTime', width: 180 },
+  ]);
+
+  const rows: RowsProp = useMemo(
+    () => [
+      {
+        id: 1,
+        name: 'Damien',
+        age: 25,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+      {
+        id: 2,
+        name: 'Nicolas',
+        age: 36,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+      {
+        id: 3,
+        name: 'Kate',
+        age: 19,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+      {
+        id: 4,
+        name: 'Sebastien',
+        age: 28,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+      {
+        id: 5,
+        name: 'Louise',
+        age: 23,
+        dateCreated: randomCreatedDate(),
+        lastLogin: randomUpdatedDate(),
+      },
+    ],
+    [],
+  );
+
+  const toggleLastLogin = useCallback(() => {
+    setColumns(cols =>
+      cols.map(col => {
+        if (col.field === 'lastLogin') {
+          col.hide = !col.hide;
+        }
+        return col;
+      }),
+    );
+  }, [setColumns]);
+
+  //TODO use XGrid when published
+  return (
+    <>
+      <Button onClick={toggleLastLogin} color={'primary'} variant={"contained"} size={"small"}>
+        Toggle Last Login Column
+      </Button>
+      <div style={{ width: 800, height: 500, padding:'10px 0' }}>
+        <Grid rows={rows} columns={columns} options={{ hideFooter: true }} />
+      </div>
+    </>
+  );
+};
+
+export const ValueGetterDemo = () => {
+  const columns = useMemo<Columns>(()=> [
+    { field: 'firstName'},
+    { field: 'lastName' },
+    { field: 'fullName', width: 200, valueGetter: ({data})=> `${data.firstName} ${data.lastName}` }
+  ], []);
+
+  const rows: RowsProp = useMemo(
+    () => [
+      {
+        id: 1,
+        firstName: 'Paul',
+        lastName: 'Kenton',
+      },
+      {
+        id: 2,
+        firstName: 'Jack',
+        lastName: 'Kilby',
+      },
+      {
+        id: 3,
+        firstName: 'John',
+        lastName: 'Napier',
+      },
+    ],
+    [],
+  );
+
+  return (
+      <div style={{ width: 800, height: 500, padding:'10px 0' }}>
+        <Grid rows={rows} columns={columns} options={{ hideFooter: true }} />
+      </div>
+  );
+};
+
+export const FormattingDemo = () => {
+  const columns = useMemo<Columns>(()=> [
+    { field: 'date', headerName: 'Year', valueFormatter: ({value}: {value: CellValue})=> (value as Date).getFullYear() }
+  ], []);
+
+  const rows: RowsProp = useMemo(
+    () => [
+      {
+        id: 1,
+        date: new Date(1979, 0, 1),
+      },
+      {
+        id: 2,
+        date: new Date(1984, 1, 1)
+      },
+      {
+        id: 3,
+        date: new Date(1992, 2, 1)
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div style={{ width: 800, height: 500, padding:'10px 0' }}>
+      <Grid rows={rows} columns={columns} options={{ hideFooter: true }} />
+    </div>
+  );
+};