add doc structure and example

* added doc structure and example

* replace xgrid with grid as not published yet

* WIP working on columns mdx

* add columns doc and demos

* fix column demo doc

* fix ts code markdown

* add autoheight, rename components Grid to XGrid, add classname prop, css fixes

* fix grid-root classname, fix import React

* v0.1.43

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

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

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

Rewording

Co-authored-by: Matt <github@nospam.33m.co>

* Rewording doc

Co-authored-by: Matt <github@nospam.33m.co>

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

Co-authored-by: Matt <github@nospam.33m.co>

* Update packages/storybook/src/docs/quick-start.stories.mdx

Co-authored-by: Matt <github@nospam.33m.co>

* Update packages/storybook/src/docs/quick-start.stories.mdx

Co-authored-by: Matt <github@nospam.33m.co>

* Update packages/storybook/src/docs/sorting.stories.mdx

Co-authored-by: Matt <github@nospam.33m.co>

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

Co-authored-by: Matt <github@nospam.33m.co>

* Update packages/storybook/src/docs/quick-start.stories.mdx

Co-authored-by: Matt <github@nospam.33m.co>

* Update packages/storybook/src/docs/quick-start.stories.mdx

Co-authored-by: Matt <github@nospam.33m.co>

* Rewording: Apply suggestions from code review

Co-authored-by: Matt <github@nospam.33m.co>

* Added 3rd level titles

* revert react import change

* testing grid with codesandbox

* v0.1.44

* revert react import change

* remove terser

* v0.1.45

* refactor rowcells to avoid nested react

* v0.1.46

* better refactor of rowcells to fix codesandbox

* upgrade dependencies

* v0.1.47

* add tslib devdep

* v0.1.48

* upgrade dependencies

* v0.1.49

* move tslib in dependencies :(

* v0.1.50

* split and simplify demos

* yarn and prettier

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: Matt <github@nospam.33m.co>

CHANGELOG.md

@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.50](https://github.com/mui-org/material-ui-x/compare/v0.1.49...v0.1.50) (2020-07-06)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
+## [0.1.49](https://github.com/mui-org/material-ui-x/compare/v0.1.48...v0.1.49) (2020-07-06)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
+## [0.1.48](https://github.com/mui-org/material-ui-x/compare/v0.1.47...v0.1.48) (2020-07-06)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
+## [0.1.47](https://github.com/mui-org/material-ui-x/compare/v0.1.46...v0.1.47) (2020-07-06)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
+## [0.1.46](https://github.com/mui-org/material-ui-x/compare/v0.1.45...v0.1.46) (2020-07-06)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
+## [0.1.45](https://github.com/mui-org/material-ui-x/compare/v0.1.44...v0.1.45) (2020-07-06)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
+## [0.1.44](https://github.com/mui-org/material-ui-x/compare/v0.1.43...v0.1.44) (2020-07-06)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
+## [0.1.43](https://github.com/mui-org/material-ui-x/compare/v0.1.42...v0.1.43) (2020-07-03)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
 ## [0.1.42](https://github.com/mui-org/material-ui-x/compare/v0.1.41...v0.1.42) (2020-06-29)
 
 **Note:** Version bump only for package material-ui-x

lerna.json

@@ -6,7 +6,7 @@
     }
   },
   "packages": ["!packages/grid", "packages/*", "packages/grid/*"],
-  "version": "0.1.42",
+  "version": "0.1.50",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/demo-app/CHANGELOG.md

@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.50](https://github.com/mui-org/material-ui-x/compare/v0.1.49...v0.1.50) (2020-07-06)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
+## [0.1.49](https://github.com/mui-org/material-ui-x/compare/v0.1.48...v0.1.49) (2020-07-06)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
+## [0.1.48](https://github.com/mui-org/material-ui-x/compare/v0.1.47...v0.1.48) (2020-07-06)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
+## [0.1.47](https://github.com/mui-org/material-ui-x/compare/v0.1.46...v0.1.47) (2020-07-06)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
+## [0.1.46](https://github.com/mui-org/material-ui-x/compare/v0.1.45...v0.1.46) (2020-07-06)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
+## [0.1.45](https://github.com/mui-org/material-ui-x/compare/v0.1.44...v0.1.45) (2020-07-06)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
+## [0.1.44](https://github.com/mui-org/material-ui-x/compare/v0.1.43...v0.1.44) (2020-07-06)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
+## [0.1.43](https://github.com/mui-org/material-ui-x/compare/v0.1.42...v0.1.43) (2020-07-03)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
 ## [0.1.41](https://github.com/mui-org/material-ui-x/compare/v0.1.40...v0.1.41) (2020-06-29)
 
 **Note:** Version bump only for package demo-app

packages/demo-app/package.json

@@ -1,15 +1,15 @@
 {
   "name": "demo-app",
-  "version": "0.1.41",
+  "version": "0.1.50",
   "private": true,
   "dependencies": {
-    "@material-ui-x/panel": "^0.1.40",
-    "@material-ui-x/splitter": "^0.1.40",
+    "@material-ui-x/panel": "^0.1.45",
+    "@material-ui-x/splitter": "^0.1.45",
     "@material-ui/core": "^4.9.12",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.54",
-    "@material-ui/x-grid": "^0.1.40",
-    "@material-ui/x-grid-data-generator": "^0.1.40",
+    "@material-ui/x-grid": "^0.1.50",
+    "@material-ui/x-grid-data-generator": "^0.1.49",
     "@trendmicro/react-interpolate": "^0.5.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

packages/demo-app/src/app/app-bar.tsx

@@ -3,7 +3,8 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Typography from '@material-ui/core/Typography';
 import AppBar from '@material-ui/core/AppBar';
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import { createStyles, Link, Theme } from '@material-ui/core';
 import Brightness7Icon from '@material-ui/icons/Brightness7';

packages/demo-app/src/app/app-breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import Link from '@material-ui/core/Link';
 
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import React from 'react';
+import * as React from 'react';
 
 import styled from 'styled-components';
 

packages/demo-app/src/app/app-drawer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import List from '@material-ui/core/List';

packages/demo-app/src/app/app-footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import Interpolate from '@trendmicro/react-interpolate';
 

packages/demo-app/src/app/app-intro.tsx

@@ -1,7 +1,7 @@
 import { MuiLogo } from './demos/grid/components/logo';
 import Typography from '@material-ui/core/Typography';
 
-import React from 'react';
+import * as React from 'react';
 import { Button, Container } from '@material-ui/core';
 import styled from 'styled-components';
 import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';

packages/demo-app/src/app/app.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useReducer } from 'react';
+import * as React from 'react';
+import { useCallback, useReducer } from 'react';
 import { DemoAppBar } from './app-bar';
 
 import './app.less';

packages/demo-app/src/app/demos/grid/components/logo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 export const LogoContainer = styled.div`

packages/demo-app/src/app/demos/grid/components/settings-panel.tsx

@@ -1,4 +1,5 @@
-import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import * as React from 'react';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { StyledPanels } from './styled-panel';
 
 import { FormControl, FormGroup, Button, FormLabel, MenuItem, Select } from '@material-ui/core';

packages/demo-app/src/app/demos/grid/real-data-grid.demo.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { AppBreadcrumbs } from '../../app-breadcrumbs';
-import { Grid, LicenseInfo, RowModel, Columns, GridOptions } from '@material-ui/x-grid';
+import { XGrid, LicenseInfo, RowModel, Columns, GridOptions } from '@material-ui/x-grid';
 import pkg from '@material-ui/x-grid/package.json';
 import { MainContainer } from './components/main-container';
 import { SettingsPanel } from './components/settings-panel';
@@ -122,7 +123,7 @@ export const RealDataGridDemo: React.FC<{}> = props => {
       <MainContainer>
         <div style={{ display: 'flex', boxSizing: 'border-box' }} className={'fill-space'}>
           <div className={'grow'}>
-            <Grid
+            <XGrid
               rows={rows as any}
               columns={cols as any}
               loading={loading}

packages/demo-app/src/app/demos/splitter/dummyContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export const DummyContent = () => (
   <div>

packages/demo-app/src/app/demos/splitter/splitter-demo.tsx

@@ -1,7 +1,8 @@
 import { Button } from '@material-ui/core';
 import TextField from '@material-ui/core/TextField';
 
-import React, { useState } from 'react';
+import * as React from 'react';
+import { useState } from 'react';
 import { DummyContent } from './dummyContent';
 import { Splitter } from '@material-ui-x/splitter';
 import { AppBreadcrumbs } from '../../app-breadcrumbs';

packages/demo-app/src/app/demos/theme/themeProvider.tsx

@@ -1,7 +1,7 @@
 //old blue: #3f51b5
 import { createMuiTheme, ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { PaletteOptions } from '@material-ui/core/styles/createPalette';
-import React from 'react';
+import * as React from 'react';
 import { ThemeProvider as SCThemeProvider } from 'styled-components';
 import { ThemeColors } from './utils';
 import { lightTheme, lightThemeId } from './light';

packages/demo-app/src/app/demos/utils/devToggle.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 const isDev = process.env.NODE_ENV !== 'production';
 

packages/demo-app/src/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 import App from './app/app';
 

packages/grid/data-grid/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.49](https://github.com/mui-org/material-ui-x/compare/v0.1.48...v0.1.49) (2020-07-06)
+
+**Note:** Version bump only for package @material-ui/data-grid
+
+
+
+
+
+## [0.1.48](https://github.com/mui-org/material-ui-x/compare/v0.1.47...v0.1.48) (2020-07-06)
+
+**Note:** Version bump only for package @material-ui/data-grid
+
+
+
+
+
+## [0.1.47](https://github.com/mui-org/material-ui-x/compare/v0.1.46...v0.1.47) (2020-07-06)
+
+**Note:** Version bump only for package @material-ui/data-grid
+
+
+
+
+
+## [0.1.46](https://github.com/mui-org/material-ui-x/compare/v0.1.45...v0.1.46) (2020-07-06)
+
+**Note:** Version bump only for package @material-ui/data-grid
+
+
+
+
+
+## [0.1.45](https://github.com/mui-org/material-ui-x/compare/v0.1.44...v0.1.45) (2020-07-06)
+
+**Note:** Version bump only for package @material-ui/data-grid
+
+
+
+
+
+## [0.1.44](https://github.com/mui-org/material-ui-x/compare/v0.1.43...v0.1.44) (2020-07-06)
+
+**Note:** Version bump only for package @material-ui/data-grid
+
+
+
+
+
+## [0.1.43](https://github.com/mui-org/material-ui-x/compare/v0.1.42...v0.1.43) (2020-07-03)
+
+**Note:** Version bump only for package @material-ui/data-grid
+
+
+
+
+
 ## [0.1.42](https://github.com/mui-org/material-ui-x/compare/v0.1.41...v0.1.42) (2020-06-29)
 
 **Note:** Version bump only for package @material-ui/data-grid

packages/grid/data-grid/README.md

@@ -36,19 +36,19 @@ Then you need to create some columns which are simple objects containing at leas
 You can import `ColDef` to see all column properties.
 A simple set of column can be.
 
-```typescript jsx
+```tsx
 const columns = [{ field: "id"}, {field: "name", headerName:  'Client Name'}...];
 ```
 
 Rows are string key value pair objects.
 
-```typescript jsx
+```tsx
 const rows = [{id: 1, name:'Jon Snow'}, {id: 2, name: 'Tyrion Lannister'}...]
 ```
 
 A complete example below.
 
-```typescript jsx
+```tsx
 import * as React from 'react';
 import { ColDef, Grid } from '@material-ui-x/grid';