[docs] Move data grid interfaces to standard API page layout (#12016)

Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>

docs/pages/x/api/data-grid/grid-actions-col-def.js

@@ -1,7 +1,26 @@
 import * as React from 'react';
-import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs';
-import * as pageProps from './grid-actions-col-def.md?muiMarkdown';
+import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage';
+import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './grid-actions-col-def.json';
 
-export default function Page() {
-  return <MarkdownDocs {...pageProps} />;
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return (
+    <InterfaceApiPage {...layoutConfig} descriptions={descriptions} pageContent={pageContent} />
+  );
 }
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/data-grid/',
+    false,
+    /\.\/grid-actions-col-def.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/x/api/data-grid/grid-actions-col-def.json

@@ -0,0 +1,99 @@
+{
+  "name": "GridActionsColDef",
+  "imports": [
+    "import { GridActionsColDef } from '@mui/x-data-grid-premium'",
+    "import { GridActionsColDef } from '@mui/x-data-grid-pro'",
+    "import { GridActionsColDef } from '@mui/x-data-grid'"
+  ],
+  "demos": "<ul><li><a href=\"/x/react-data-grid/column-definition/#special-properties\">Special column properties</a></li></ul>",
+  "properties": {
+    "field": { "type": { "description": "string" }, "required": true },
+    "getActions": {
+      "type": {
+        "description": "(params: GridRowParams&lt;R&gt;) =&gt; React.ReactElement&lt;GridActionsCellItemProps&gt;[]"
+      },
+      "required": true
+    },
+    "type": { "type": { "description": "'actions'" }, "default": "'actions'", "required": true },
+    "aggregable": {
+      "type": { "description": "boolean" },
+      "default": "true",
+      "isPremiumPlan": true
+    },
+    "align": { "type": { "description": "GridAlignment" } },
+    "availableAggregationFunctions": {
+      "type": { "description": "string[]" },
+      "isPremiumPlan": true
+    },
+    "cellClassName": { "type": { "description": "GridCellClassNamePropType&lt;R, V&gt;" } },
+    "colSpan": {
+      "type": { "description": "number | GridColSpanFn&lt;R, V, F&gt;" },
+      "default": "1"
+    },
+    "description": { "type": { "description": "string" } },
+    "disableColumnMenu": { "type": { "description": "boolean" }, "default": "false" },
+    "disableExport": { "type": { "description": "boolean" }, "default": "false" },
+    "disableReorder": { "type": { "description": "boolean" }, "default": "false" },
+    "display": { "type": { "description": "'text' | 'flex'" } },
+    "editable": { "type": { "description": "boolean" }, "default": "false" },
+    "filterable": { "type": { "description": "boolean" }, "default": "true" },
+    "filterOperators": { "type": { "description": "GridFilterOperator&lt;R, V, F&gt;[]" } },
+    "flex": { "type": { "description": "number" } },
+    "getApplyQuickFilterFn": { "type": { "description": "GetApplyQuickFilterFn&lt;R, V&gt;" } },
+    "getSortComparator": {
+      "type": {
+        "description": "(sortDirection: GridSortDirection) =&gt; GridComparatorFn&lt;V&gt; | undefined"
+      }
+    },
+    "groupable": { "type": { "description": "boolean" }, "default": "true" },
+    "groupingValueGetter": {
+      "type": { "description": "GridGroupingValueGetter&lt;R&gt;" },
+      "isPremiumPlan": true
+    },
+    "headerAlign": { "type": { "description": "GridAlignment" } },
+    "headerClassName": { "type": { "description": "GridColumnHeaderClassNamePropType" } },
+    "headerName": { "type": { "description": "string" } },
+    "hideable": { "type": { "description": "boolean" }, "default": "true" },
+    "hideSortIcons": { "type": { "description": "boolean" }, "default": "false" },
+    "maxWidth": { "type": { "description": "number" }, "default": "Infinity" },
+    "minWidth": { "type": { "description": "number" }, "default": "50" },
+    "pastedValueParser": {
+      "type": { "description": "GridPastedValueParser&lt;R, V, F&gt;" },
+      "isPremiumPlan": true
+    },
+    "pinnable": { "type": { "description": "boolean" }, "default": "true" },
+    "preProcessEditCellProps": {
+      "type": {
+        "description": "(params: GridPreProcessEditCellProps) =&gt; GridEditCellProps | Promise&lt;GridEditCellProps&gt;"
+      }
+    },
+    "renderCell": {
+      "type": {
+        "description": "(params: GridRenderCellParams&lt;R, V, F&gt;) =&gt; React.ReactNode"
+      }
+    },
+    "renderEditCell": {
+      "type": {
+        "description": "(params: GridRenderEditCellParams&lt;R, V, F&gt;) =&gt; React.ReactNode"
+      }
+    },
+    "renderHeader": {
+      "type": {
+        "description": "(params: GridColumnHeaderParams&lt;R, V, F&gt;) =&gt; React.ReactNode"
+      }
+    },
+    "renderHeaderFilter": {
+      "type": { "description": "(params: GridRenderHeaderFilterProps) =&gt; React.ReactNode" },
+      "isProPlan": true
+    },
+    "resizable": { "type": { "description": "boolean" }, "default": "true" },
+    "sortable": { "type": { "description": "boolean" }, "default": "true" },
+    "sortComparator": { "type": { "description": "GridComparatorFn&lt;V&gt;" } },
+    "sortingOrder": { "type": { "description": "GridSortDirection[]" } },
+    "valueFormatter": { "type": { "description": "GridValueFormatter&lt;R, V, F&gt;" } },
+    "valueGetter": { "type": { "description": "GridValueGetter&lt;R, V, F&gt;" } },
+    "valueParser": { "type": { "description": "GridValueParser&lt;R, V, F&gt;" } },
+    "valueSetter": { "type": { "description": "GridValueSetter&lt;R, V, F&gt;" } },
+    "width": { "type": { "description": "number" }, "default": "100" }
+  }
+}