sticky support

docs/pages/api/data-grid.md

@@ -26,8 +26,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">columns</span> | <span class="prop-type">array</span> | <span class="prop-default">[]</span> | The columns configuration. |
+| <span class="prop-name">columns</span> | <span class="prop-type">Array&lt;{ children?: Array&lt;object&gt;, field: string, label?: string, resizable?: bool, sortable?: bool, sortingOrder?: Array&lt;'asc'<br>&#124;&nbsp;'desc'<br>&#124;&nbsp;null&gt; }&gt;</span> | <span class="prop-default">[]</span> | The columns configuration. |
+| <span class="prop-name">defaultColumnOptions</span> | <span class="prop-type">{ resizable?: bool, sortable?: bool, sortingOrder?: Array&lt;'asc'<br>&#124;&nbsp;'desc'<br>&#124;&nbsp;null&gt; }</span> | <span class="prop-default">{  resizable: true,  sortable: true,  sortingOrder: ['asc', 'desc', null],}</span> | The default options that get applied to each column. |
+| <span class="prop-name">defaultSorting</span> | <span class="prop-type">Array&lt;{ field: string, sort: 'asc'<br>&#124;&nbsp;'desc' }&gt;</span> | <span class="prop-default">[]</span> | The default sorting state. (Uncontrolled) |
+| <span class="prop-name">onSortingChange</span> | <span class="prop-type">func</span> |  | Callback fired when the user change the column sort.<br><br>**Signature:**<br>`function(event: object, value: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new sorting value. |
 | <span class="prop-name">rowsData</span> | <span class="prop-type">array</span> | <span class="prop-default">[]</span> | The data record array to be rendered. |
+| <span class="prop-name">sorting</span> | <span class="prop-type">Array&lt;{ field: string, sort: 'asc'<br>&#124;&nbsp;'desc' }&gt;</span> |  | Sorting state. (Controlled) |
 
 The `ref` is forwarded to the root element.
 
@@ -41,6 +45,9 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiDataGrid-root</span> | Styles applied to the root element.
+| <span class="prop-name">bodyContainer</span> | <span class="prop-name">.MuiDataGrid-bodyContainer</span> | 
+| <span class="prop-name">headerLabel</span> | <span class="prop-name">.MuiDataGrid-headerLabel</span> | 
+| <span class="prop-name">resize</span> | <span class="prop-name">.MuiDataGrid-resize</span> | 
 
 You can override the style of the component thanks to one of these customization points:
 

docs/pages/api/table-sort-label.md

@@ -27,7 +27,7 @@ A button based label for placing inside `TableCell` for column sorting.
 | <span class="prop-name">active</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the label will have the active styling (should be true for the sorted column). |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | Label contents, the arrow will be appended automatically. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">direction</span> | <span class="prop-type">'asc'<br>&#124;&nbsp;'desc'</span> | <span class="prop-default">'desc'</span> | The current sort direction. |
+| <span class="prop-name">direction</span> | <span class="prop-type">'asc'<br>&#124;&nbsp;'desc'</span> | <span class="prop-default">'asc'</span> | The current sort direction. |
 | <span class="prop-name">hideSortIcon</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Hide sort icon when active is false. |
 | <span class="prop-name">IconComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">ArrowDownwardIcon</span> | Sort icon to use. |
 

docs/src/pages/components/data-grid/Simple.js

@@ -19,14 +19,9 @@ export default function Simple() {
       columns={[
         { field: 'name', label: 'Name' },
         { field: 'rating', label: 'Rating' },
-        {
-          label: 'Contacts',
-          children: [
-            { field: 'address', label: 'Address' },
-            { field: 'phone', label: 'Phone' },
-            { field: 'country', label: 'Country' },
-          ],
-        },
+        { field: 'address', label: 'Address' },
+        { field: 'phone', label: 'Phone' },
+        { field: 'country', label: 'Country' },
       ]}
       rowsData={data}
     />

docs/src/pages/components/data-grid/Simple.tsx

@@ -19,14 +19,9 @@ export default function Simple() {
       columns={[
         { field: 'name', label: 'Name' },
         { field: 'rating', label: 'Rating' },
-        {
-          label: 'Contacts',
-          children: [
-            { field: 'address', label: 'Address' },
-            { field: 'phone', label: 'Phone' },
-            { field: 'country', label: 'Country' },
-          ],
-        },
+        { field: 'address', label: 'Address' },
+        { field: 'phone', label: 'Phone' },
+        { field: 'country', label: 'Country' },
       ]}
       rowsData={data}
     />

docs/src/pages/components/data-grid/columns/ColumnSizing.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(200)).map(() => ({
+  Country: chance.country(),
+  Area: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  Population_Urban: chance.floating({ min: 0, max: 1 }),
+  Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
+  GDP_Industry: chance.floating({ min: 0, max: 1 }),
+  GDP_Services: chance.floating({ min: 0, max: 1 }),
+}));
+
+export default function ColumnGroups() {
+  return (
+    <DataGrid
+      style={{ maxHeight: 300, width: '100%' }}
+      columns={[
+        { field: 'Country', label: 'Country' },
+        { field: 'Area', label: 'Area, sq. km.' },
+        { field: 'Population_Total', label: 'Population Total' },
+        { field: 'Population_Urban', label: 'Population Urban' },
+        { field: 'GDP_Total', label: 'GDP Total' },
+        { field: 'GDP_Agriculture', label: 'GDP Agriculture' },
+        { field: 'GDP_Industry', label: 'GDP Industry' },
+        { field: 'GDP_Services', label: 'GDP Services' },
+      ]}
+      rowsData={data}
+    />
+  );
+}

docs/src/pages/components/data-grid/columns/ColumnSizing.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(200)).map(() => ({
+  Country: chance.country(),
+  Area: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  Population_Urban: chance.floating({ min: 0, max: 1 }),
+  Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
+  GDP_Industry: chance.floating({ min: 0, max: 1 }),
+  GDP_Services: chance.floating({ min: 0, max: 1 }),
+}));
+
+export default function ColumnGroups() {
+  return (
+    <DataGrid
+      style={{ maxHeight: 300, width: '100%' }}
+      columns={[
+        { field: 'Country', label: 'Country' },
+        { field: 'Area', label: 'Area, sq. km.' },
+        { field: 'Population_Total', label: 'Population Total' },
+        { field: 'Population_Urban', label: 'Population Urban' },
+        { field: 'GDP_Total', label: 'GDP Total' },
+        { field: 'GDP_Agriculture', label: 'GDP Agriculture' },
+        { field: 'GDP_Industry', label: 'GDP Industry' },
+        { field: 'GDP_Services', label: 'GDP Services' },
+      ]}
+      rowsData={data}
+    />
+  );
+}

docs/src/pages/components/data-grid/columns/ColumnSticky.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(200)).map(() => ({
+  Country: chance.country(),
+  Area: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  Population_Urban: chance.floating({ min: 0, max: 1 }),
+  Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
+  GDP_Industry: chance.floating({ min: 0, max: 1 }),
+  GDP_Services: chance.floating({ min: 0, max: 1 }),
+}));
+
+export default function ColumnGroups() {
+  return (
+    <DataGrid
+      style={{ maxHeight: 300, width: '100%' }}
+      columns={[
+        { field: 'Country', label: 'Country' },
+        { field: 'Area', label: 'Area, sq. km.' },
+        { field: 'Population_Total', label: 'Population Total' },
+        { field: 'Population_Urban', label: 'Population Urban' },
+        { field: 'GDP_Total', label: 'GDP Total' },
+        { field: 'GDP_Agriculture', label: 'GDP Agriculture' },
+        { field: 'GDP_Industry', label: 'GDP Industry' },
+        { field: 'GDP_Services', label: 'GDP Services' },
+      ]}
+      rowsData={data}
+    />
+  );
+}

docs/src/pages/components/data-grid/columns/ColumnSticky.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(200)).map(() => ({
+  Country: chance.country(),
+  Area: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  Population_Urban: chance.floating({ min: 0, max: 1 }),
+  Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
+  GDP_Industry: chance.floating({ min: 0, max: 1 }),
+  GDP_Services: chance.floating({ min: 0, max: 1 }),
+}));
+
+export default function ColumnGroups() {
+  return (
+    <DataGrid
+      style={{ maxHeight: 300, width: '100%' }}
+      columns={[
+        { field: 'Country', label: 'Country' },
+        { field: 'Area', label: 'Area, sq. km.' },
+        { field: 'Population_Total', label: 'Population Total' },
+        { field: 'Population_Urban', label: 'Population Urban' },
+        { field: 'GDP_Total', label: 'GDP Total' },
+        { field: 'GDP_Agriculture', label: 'GDP Agriculture' },
+        { field: 'GDP_Industry', label: 'GDP Industry' },
+        { field: 'GDP_Services', label: 'GDP Services' },
+      ]}
+      rowsData={data}
+    />
+  );
+}

docs/src/pages/components/data-grid/columns/columns.md

@@ -7,6 +7,8 @@ components: DataGrid
 
 <p class="description">A fast and extendable data table and data grid for React. It's a feature-rich compoent available in MIT or Enterprise versions.</p>
 
+## Column width
+
 ## Column groups
 
 {{"demo": "pages/components/data-grid/columns/ColumnGroups.js", "bg": "inline"}}
@@ -20,6 +22,8 @@ components: DataGrid
 
 ## Column sizing
 
+{{"demo": "pages/components/data-grid/columns/ColumnSizing.js", "bg": "inline"}}
+
 - https://ag-grid.com/javascript-grid-resizing/
 - https://demos.telerik.com/kendo-ui/grid/column-resizing
 - https://www.telerik.com/kendo-react-ui/components/grid/columns/resizing/
@@ -39,6 +43,8 @@ components: DataGrid
 
 ## Column sticky
 
+{{"demo": "pages/components/data-grid/columns/ColumnSticky.js", "bg": "inline"}}
+
 - https://ag-grid.com/javascript-grid-pinning/
 - https://www.telerik.com/kendo-react-ui/components/grid/columns/locked/
 - https://demos.telerik.com/kendo-ui/grid/frozen-columns

docs/src/pages/components/data-grid/rows/RowSorting.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(200)).map(() => ({
+  Country: chance.country(),
+  Area: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  Population_Urban: chance.floating({ min: 0, max: 1 }),
+  Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
+  GDP_Industry: chance.floating({ min: 0, max: 1 }),
+  GDP_Services: chance.floating({ min: 0, max: 1 }),
+}));
+
+const columns = [
+  { field: 'Country', label: 'Country' },
+  { field: 'Area', label: 'Area, sq. km.' },
+  { field: 'Population_Total', label: 'Population Total' },
+  { field: 'Population_Urban', label: 'Population Urban' },
+  { field: 'GDP_Total', label: 'GDP Total' },
+  { field: 'GDP_Agriculture', label: 'GDP Agriculture' },
+  { field: 'GDP_Industry', label: 'GDP Industry' },
+  { field: 'GDP_Services', label: 'GDP Services' },
+];
+
+export default function ColumnGroups() {
+  return (
+    <DataGrid
+      style={{ maxHeight: 300, width: '100%' }}
+      columns={columns}
+      rowsData={data}
+      defaultColumnOptions={{ sortable: true }}
+    />
+  );
+}

docs/src/pages/components/data-grid/rows/RowSorting.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Chance from 'chance';
+import DataGrid from '@material-ui/lab/DataGrid';
+
+const chance = new Chance();
+
+const data = Array.from(new Array(200)).map(() => ({
+  Country: chance.country(),
+  Area: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  Population_Urban: chance.floating({ min: 0, max: 1 }),
+  Population_Total: chance.integer({ min: 10e3, max: 10e6 }),
+  GDP_Agriculture: chance.floating({ min: 0, max: 1 }),
+  GDP_Industry: chance.floating({ min: 0, max: 1 }),
+  GDP_Services: chance.floating({ min: 0, max: 1 }),
+}));
+
+const columns = [
+  { field: 'Country', label: 'Country' },
+  { field: 'Area', label: 'Area, sq. km.' },
+  { field: 'Population_Total', label: 'Population Total' },
+  { field: 'Population_Urban', label: 'Population Urban' },
+  { field: 'GDP_Total', label: 'GDP Total' },
+  { field: 'GDP_Agriculture', label: 'GDP Agriculture' },
+  { field: 'GDP_Industry', label: 'GDP Industry' },
+  { field: 'GDP_Services', label: 'GDP Services' },
+];
+
+export default function ColumnGroups() {
+  return (
+    <DataGrid
+      style={{ maxHeight: 300, width: '100%' }}
+      columns={columns}
+      rowsData={data}
+      defaultColumnOptions={{ sortable: true }}
+    />
+  );
+}

docs/src/pages/components/data-grid/rows/rows.md

@@ -9,6 +9,8 @@ components: DataGrid
 
 ## Row sorting
 
+{{"demo": "pages/components/data-grid/rows/RowSorting.js", "bg": "inline"}}
+
 +Multi-sorting
 
 - https://ag-grid.com/javascript-grid-sorting/

docs/src/pages/components/tables/EnhancedTable.js

@@ -99,7 +99,7 @@ function EnhancedTableHead(props) {
           >
             <TableSortLabel
               active={orderBy === headCell.id}
-              direction={order}
+              direction={orderBy === headCell.id ? order : 'asc'}
               onClick={createSortHandler(headCell.id)}
             >
               {headCell.label}
@@ -221,8 +221,8 @@ export default function EnhancedTable() {
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 
   const handleRequestSort = (event, property) => {
-    const isDesc = orderBy === property && order === 'desc';
-    setOrder(isDesc ? 'asc' : 'desc');
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
     setOrderBy(property);
   };
 

docs/src/pages/components/tables/EnhancedTable.tsx

@@ -134,7 +134,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
           >
             <TableSortLabel
               active={orderBy === headCell.id}
-              direction={order}
+              direction={orderBy === headCell.id ? order : 'asc'}
               onClick={createSortHandler(headCell.id)}
             >
               {headCell.label}
@@ -249,8 +249,8 @@ export default function EnhancedTable() {
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof Data) => {
-    const isDesc = orderBy === property && order === 'desc';
-    setOrder(isDesc ? 'asc' : 'desc');
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
     setOrderBy(property);
   };