[DataGrid] Rename all public API (#1069)

docs/next.config.js

@@ -38,7 +38,7 @@ module.exports = {
           LIB_VERSION: JSON.stringify(pkg.version),
           PULL_REQUEST: JSON.stringify(process.env.PULL_REQUEST === 'true'),
           REACT_MODE: JSON.stringify(reactMode),
-          EXPERIMENTAL_ENABLED: JSON.stringify(
+          GRID_EXPERIMENTAL_ENABLED: JSON.stringify(
             // Set by Netlify
             process.env.PULL_REQUEST === 'false' ? 'false' : 'true',
           ),

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { DataGrid, ColDef } from '@material-ui/data-grid';
+import { DataGrid, GridColDef } from '@material-ui/data-grid';
 
 export default function BasicColumnsGrid() {
   return (
     <div style={{ height: 250, width: '100%' }}>
       <DataGrid
         columns={
-          [{ field: 'id' }, { field: 'username' }, { field: 'age' }] as ColDef[]
+          [{ field: 'id' }, { field: 'username' }, { field: 'age' }] as GridColDef[]
         }
         rows={[
           {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { DataGrid, ColTypeDef } from '@material-ui/data-grid';
+import { DataGrid, GridColTypeDef } from '@material-ui/data-grid';
 import {
   randomStatusOptions,
   randomPrice,
@@ -32,7 +32,7 @@ const currencyFormatter = new Intl.NumberFormat('en-US', {
   currency: 'USD',
 });
 
-const usdPrice: ColTypeDef = {
+const usdPrice: GridColTypeDef = {
   type: 'number',
   width: 130,
   valueFormatter: ({ value }) => currencyFormatter.format(Number(value)),

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

@@ -11,14 +11,14 @@ components: DataGrid, XGrid
 
 Grid columns are defined with the `columns` prop.
 `columns` expects an array of objects.
-The columns should have this type: `ColDef[]`.
+The columns should have this type: `GridColDef[]`.
 
-`field` is the only required property since it's the column identifier. It's also used to match with `RowData` values.
+`field` is the only required property since it's the column identifier. It's also used to match with `GridRowData` values.
 
 ```ts
-interface ColDef {
+interface GridColDef {
   /**
-   * The column identifier. It's used to match with [[RowData]] values.
+   * The column identifier. It's used to match with [[GridRowData]] values.
    */
   field: string;
   …
@@ -45,21 +45,21 @@ For more advanced header configuration, go to the [rendering section](/component
 
 By default, the columns have a width of 100 pixels.
 This is an arbitrary, easy to remember value.
-To change the width of a column, use the `width` property available in `ColDef`.
+To change the width of a column, use the `width` property available in `GridColDef`.
 
 {{"demo": "pages/components/data-grid/columns/ColumnWidthGrid.js", "bg": "inline"}}
 
 ### Fluid width
 
-Each column has a fixed width of 100 pixels by default, but column fluidity (responsiveness) can be by achieved by setting the `flex` property in `ColDef`.
+Each column has a fixed width of 100 pixels by default, but column fluidity (responsiveness) can be by achieved by setting the `flex` property in `GridColDef`.
 
 The `flex` property accepts a value between 0 and ∞.
 
 The `flex` property works by dividing the remaining space in the grid among all flex columns in proportion to their `flex` value.
 For example, consider a grid with a total width of 500px that has three columns: the first with `width: 200`; the second with `flex: 1`; and third with `flex: 0.5`.
 The first column will be 200px wide, leaving 300px remaining. The column with `flex: 1` is twice the size of `flex: 0.5`, which means that final sizes will be: 200px, 200px, 100px.
 
-Note that `flex` doesn't work together with `width`. If you set both `flex` and `width` in `ColDef`, `flex` will override `width`.
+Note that `flex` doesn't work together with `width`. If you set both `flex` and `width` in `GridColDef`, `flex` will override `width`.
 
 In addition, `flex` does not work if the combined width of the columns that have `width` is more than the width of the grid itself. If that is the case a scroll bar will be visible, and the columns that have `flex` will default back to their base value of 100px.
 
@@ -69,7 +69,7 @@ In addition, `flex` does not work if the combined width of the columns that have
 
 By default, `XGrid` allows all columns to be resized by dragging the right portion of the column separator.
 
-To prevent the resizing of a column, set `resizable: false` in the `ColDef`.
+To prevent the resizing of a column, set `resizable: false` in the `GridColDef`.
 Alternatively, to disable all columns resize, set the prop `disableColumnResize={true}`.
 
 {{"demo": "pages/components/data-grid/columns/ColumnSizingGrid.js", "disableAd": true, "bg": "inline"}}
@@ -109,7 +109,7 @@ You can extend the native column types with your own by simply spreading the nec
 The demo below defines a new column type: `usdPrice` that extends the native `number` column type.
 
 ```jsx
-const usdPrice: ColTypeDef = {
+const usdPrice: GridColTypeDef = {
   type: 'number',
   width: 130,
   valueFormatter: ({ value }) => valueFormatter.format(Number(value)),

docs/src/pages/components/data-grid/filtering/ColumnTypeFilteringGrid.js

@@ -2,14 +2,14 @@ import * as React from 'react';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import {
   DataGrid,
-  getNumericColumnOperators,
-  PreferencePanelsValue,
+  getGridNumericColumnOperators,
+  GridPreferencePanelsValue,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 const priceColumnType = {
   extendType: 'number',
-  filterOperators: getNumericColumnOperators()
+  filterOperators: getGridNumericColumnOperators()
     .filter((operator) => operator.value === '>' || operator.value === '<')
     .map((operator) => {
       return {
@@ -58,7 +58,7 @@ export default function ColumnTypeFilteringGrid() {
         state={{
           preferencePanel: {
             open: true,
-            openedPanelValue: PreferencePanelsValue.filters,
+            openedPanelValue: GridPreferencePanelsValue.filters,
           },
         }}
       />

docs/src/pages/components/data-grid/filtering/ColumnTypeFilteringGrid.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import {
   DataGrid,
-  ColTypeDef,
-  getNumericColumnOperators,
-  PreferencePanelsValue,
+  GridColTypeDef,
+  getGridNumericColumnOperators,
+  GridPreferencePanelsValue,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
-const priceColumnType: ColTypeDef = {
+const priceColumnType: GridColTypeDef = {
   extendType: 'number',
-  filterOperators: getNumericColumnOperators()
+  filterOperators: getGridNumericColumnOperators()
     .filter((operator) => operator.value === '>' || operator.value === '<')
     .map((operator) => {
       return {
@@ -58,7 +58,7 @@ export default function ColumnTypeFilteringGrid() {
         state={{
           preferencePanel: {
             open: true,
-            openedPanelValue: PreferencePanelsValue.filters,
+            openedPanelValue: GridPreferencePanelsValue.filters,
           },
         }}
       />

docs/src/pages/components/data-grid/filtering/CustomRatingOperator.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import { Rating } from '@material-ui/lab';
-import { PreferencePanelsValue, DataGrid } from '@material-ui/data-grid';
+import { GridPreferencePanelsValue, DataGrid } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 const useStyles = makeStyles({
@@ -97,7 +97,7 @@ export default function CustomRatingOperator() {
         state={{
           preferencePanel: {
             open: true,
-            openedPanelValue: PreferencePanelsValue.filters,
+            openedPanelValue: GridPreferencePanelsValue.filters,
           },
         }}
       />

docs/src/pages/components/data-grid/filtering/CustomRatingOperator.tsx

@@ -3,10 +3,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Rating } from '@material-ui/lab';
 import {
   FilterInputValueProps,
-  PreferencePanelsValue,
+  GridPreferencePanelsValue,
   DataGrid,
-  FilterItem,
-  ColDef,
+  GridFilterItem,
+  GridColDef,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
@@ -45,7 +45,7 @@ const RatingOnlyOperators = [
   {
     label: 'From',
     value: 'from',
-    getApplyFilterFn: (filterItem: FilterItem, column: ColDef) => {
+    getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => {
       if (
         !filterItem.columnField ||
         !filterItem.value ||
@@ -91,7 +91,7 @@ export default function CustomRatingOperator() {
         state={{
           preferencePanel: {
             open: true,
-            openedPanelValue: PreferencePanelsValue.filters,
+            openedPanelValue: GridPreferencePanelsValue.filters,
           },
         }}
       />

docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.js

@@ -4,8 +4,8 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Rating } from '@material-ui/lab';
 import {
   DataGrid,
-  getNumericColumnOperators,
-  PreferencePanelsValue,
+  getGridNumericColumnOperators,
+  GridPreferencePanelsValue,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
@@ -62,10 +62,12 @@ export default function ExtendNumericOperator() {
     const ratingColumn = columns.find((column) => column.field === 'rating');
     const ratingColIndex = columns.findIndex((col) => col.field === 'rating');
 
-    const ratingFilterOperators = getNumericColumnOperators().map((operator) => ({
-      ...operator,
-      InputComponent: RatingInputValue,
-    }));
+    const ratingFilterOperators = getGridNumericColumnOperators().map(
+      (operator) => ({
+        ...operator,
+        InputComponent: RatingInputValue,
+      }),
+    );
 
     columns[ratingColIndex] = {
       ...ratingColumn,
@@ -81,7 +83,7 @@ export default function ExtendNumericOperator() {
         state={{
           preferencePanel: {
             open: true,
-            openedPanelValue: PreferencePanelsValue.filters,
+            openedPanelValue: GridPreferencePanelsValue.filters,
           },
         }}
       />

docs/src/pages/components/data-grid/filtering/ExtendNumericOperator.tsx

@@ -4,8 +4,8 @@ import { Rating } from '@material-ui/lab';
 import {
   DataGrid,
   FilterInputValueProps,
-  getNumericColumnOperators,
-  PreferencePanelsValue,
+  getGridNumericColumnOperators,
+  GridPreferencePanelsValue,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
@@ -52,10 +52,12 @@ export default function ExtendNumericOperator() {
     const ratingColumn = columns.find((column) => column.field === 'rating')!;
     const ratingColIndex = columns.findIndex((col) => col.field === 'rating');
 
-    const ratingFilterOperators = getNumericColumnOperators().map((operator) => ({
-      ...operator,
-      InputComponent: RatingInputValue,
-    }));
+    const ratingFilterOperators = getGridNumericColumnOperators().map(
+      (operator) => ({
+        ...operator,
+        InputComponent: RatingInputValue,
+      }),
+    );
     columns[ratingColIndex] = {
       ...ratingColumn,
       filterOperators: ratingFilterOperators,
@@ -70,7 +72,7 @@ export default function ExtendNumericOperator() {
         state={{
           preferencePanel: {
             open: true,
-            openedPanelValue: PreferencePanelsValue.filters,
+            openedPanelValue: GridPreferencePanelsValue.filters,
           },
         }}
       />

docs/src/pages/components/data-grid/filtering/MultiFilteringWithOrGrid.js

@@ -1,4 +1,4 @@
-import { LinkOperator, XGrid } from '@material-ui/x-grid';
+import { GridLinkOperator, XGrid } from '@material-ui/x-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 import * as React from 'react';
 
@@ -7,7 +7,7 @@ const filterModel = {
     { columnField: 'commodity', operatorValue: 'contains', value: 'rice' },
     { columnField: 'commodity', operatorValue: 'startsWith', value: 'soy' },
   ],
-  linkOperator: LinkOperator.Or,
+  linkOperator: GridLinkOperator.Or,
 };
 
 export default function MultiFilteringWithOrGrid() {

docs/src/pages/components/data-grid/filtering/MultiFilteringWithOrGrid.tsx

@@ -1,4 +1,4 @@
-import { FilterModel, LinkOperator, XGrid } from '@material-ui/x-grid';
+import { FilterModel, GridLinkOperator, XGrid } from '@material-ui/x-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 import * as React from 'react';
 
@@ -7,7 +7,7 @@ const filterModel: FilterModel = {
     { columnField: 'commodity', operatorValue: 'contains', value: 'rice' },
     { columnField: 'commodity', operatorValue: 'startsWith', value: 'soy' },
   ],
-  linkOperator: LinkOperator.Or,
+  linkOperator: GridLinkOperator.Or,
 };
 
 export default function MultiFilteringWithOrGrid() {

docs/src/pages/components/data-grid/filtering/ServerFilterGrid.js

@@ -27,6 +27,7 @@ function loadServerRows(commodityFilterValue) {
 
 export default function ServerFilterGrid() {
   const [columns] = React.useState([{ field: 'commodity', width: 150 }]);
+
   const [rows, setRows] = React.useState([]);
   const [filterValue, setFilterValue] = React.useState();
   const [loading, setLoading] = React.useState(false);

docs/src/pages/components/data-grid/filtering/ServerFilterGrid.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {
-  ColDef,
+  GridColDef,
   DataGrid,
-  FilterModelParams,
-  RowModel,
+  GridFilterModelParams,
+  GridRowModel,
 } from '@material-ui/data-grid';
 
 function loadServerRows(commodityFilterValue?: string): Promise<any> {
@@ -31,12 +31,14 @@ function loadServerRows(commodityFilterValue?: string): Promise<any> {
 }
 
 export default function ServerFilterGrid() {
-  const [columns] = React.useState<ColDef[]>([{ field: 'commodity', width: 150 }]);
-  const [rows, setRows] = React.useState<RowModel[]>([]);
+  const [columns] = React.useState<GridColDef[]>([
+    { field: 'commodity', width: 150 },
+  ]);
+  const [rows, setRows] = React.useState<GridRowModel[]>([]);
   const [filterValue, setFilterValue] = React.useState<string | undefined>();
   const [loading, setLoading] = React.useState(false);
 
-  const onFilterChange = React.useCallback((params: FilterModelParams) => {
+  const onFilterChange = React.useCallback((params: GridFilterModelParams) => {
     setFilterValue(params.filterModel.items[0].value);
   }, []);
 

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

@@ -42,7 +42,7 @@ Filters are enabled by default, but you can easily disable this feature by setti
 
 #### Per column
 
-You can disable the filter on a column by setting the `filterable` property of the `ColDef` to `false`;
+You can disable the filter on a column by setting the `filterable` property of the `GridColDef` to `false`;
 
 ```js
 const columns = [{ field: 'image', filterable: false }];
@@ -116,7 +116,7 @@ const filterModel: FilterModel = {
     { columnField: 'commodity', operatorValue: 'contains', value: 'rice' },
     { columnField: 'commodity', operatorValue: 'startsWith', value: 'Soy' },
   ],
-  linkOperator: LinkOperator.Or,
+  linkOperator: GridLinkOperator.Or,
 };
 ```