[docs] Add Rendering section #267

oliviertassinari · 2020-09-12T16:19:43Z

Handle https://deploy-preview-267--material-ui-x.netlify.app/components/data-grid/rendering/

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

docs/src/pages/components/data-grid/rendering/ColumnVirtualizationGrid.tsx

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

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

updated

oliviertassinari · 2020-09-13T18:18:27Z

packages/grid/x-grid-modules/src/components/autosizer.tsx

-export function AutoSizerWrapper(props: any) {
-  return <AutoSizer {...props}>{(size: any) => props.children(size)}</AutoSizer>;
-}
+export const AutoSizerWrapper = AutoSizer;


Avoid the creation of one component. It should be slightly faster.

oliviertassinari · 2020-09-13T18:18:49Z

packages/grid/x-grid-modules/src/components/cell.tsx

-export const Cell: React.FC<GridCellProps> = React.memo(
-  ({
-    value,
-    field,
-    width,
-    children,
-    showRightBorder,
+export const Cell: React.FC<GridCellProps> = React.memo((props) => {


coding style convention

oliviertassinari · 2020-09-13T18:19:45Z

packages/grid/x-grid-modules/src/components/cell.tsx

-  !width ? null : <Cell key="empty-col-left" width={width} />,
+  !width ? null : <Cell width={width} />,


The impact of a key is limited to the component that renders the element. So no impact here.

oliviertassinari · 2020-09-13T18:21:03Z

packages/grid/x-grid-modules/src/components/row-cells.tsx

+  columns: Columns;
+  domIndex: number;
+  extendRowFullWidth: boolean;
  firstColIdx: number;
-  lastColIdx: number;
  hasScroll: { y: boolean; x: boolean };
-  scrollSize: number;
-  columns: Columns;
+  lastColIdx: number;
  row: RowModel;
-  showCellRightBorder: boolean;
-  extendRowFullWidth: boolean;
  rowIndex: number;
-  domIndex: number;
+  scrollSize: number;
+  showCellRightBorder: boolean;


oliviertassinari · 2020-09-13T18:21:25Z

packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts

+        color: theme.palette.text.primary,
+        ...theme.typography.body2,


move as much CSS as possible to the root.

oliviertassinari · 2020-09-13T18:22:27Z

packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts

+          backgroundColor: fade(
+            theme.palette.background.default,
+            theme.palette.action.disabledOpacity,
+          ),


Add missing color indicator that there is an overlay blocking the interaction on the cells.

oliviertassinari · 2020-09-13T18:23:01Z

packages/grid/x-grid-modules/src/components/viewport.tsx

-          <RightEmptyCell key="right-empty" width={renderCtx.rightEmptyWidth} />
+          <RightEmptyCell width={renderCtx.rightEmptyWidth} />


key has no impact, the position of the children is known by React, it never changes.

oliviertassinari · 2020-09-13T18:23:48Z

packages/grid/x-grid-modules/src/hooks/features/useComponents.tsx

-  const componentParams: ComponentParams = React.useMemo(
+  const componentProps: ComponentProps = React.useMemo(


These used to be render functions, but are components now, hence params -> props to avoid confusion.

oliviertassinari · 2020-09-13T18:24:53Z

packages/grid/x-grid-modules/src/models/colDef/numericColDef.ts

@@ -8,7 +8,6 @@ export const NUMERIC_COL_DEF: ColTypeDef = {
  type: 'number',
  align: 'right',
  headerAlign: 'right',
-  width: 80,


We document 100px as the default, probably also simpler for developers to do the math when they see that they need to add or remove space.

oliviertassinari · 2020-09-13T18:25:49Z

packages/grid/x-grid-modules/src/utils/sortingUtils.ts

 export const stringNumberComparer: ComparatorFn = (v1: CellValue, v2: CellValue) => {
  const nillResult = nillComparer(v1, v2);
-  if (nillResult != null) {
+  if (nillResult !== null) {
    return nillResult;
  }


The method seems to be relatively slow when sorting 100,000 rows in memory. I'm not sure we have any great alternatives.

dtassone · 2020-09-14T09:14:06Z

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

+  { field: 'id', hide: true },
+  {
+    field: 'date',
+    width: 500,


you can add a column type here to render the date formatted

dtassone · 2020-09-14T09:15:29Z

Handle https://deploy-preview-267--material-ui-x.netlify.app/components/data-grid/rendering/

How do we access the ant-design grid?

oliviertassinari · 2020-09-14T09:17:38Z

How do we access the ant-design grid?

Scroll at the bottom of the page or on the overview page click on the "100% customizable" link.

oliviertassinari added the docs Improvements or additions to the documentation label Sep 12, 2020

oliviertassinari force-pushed the docs-data-grid-v15 branch 4 times, most recently from 1a46904 to 37a0ff6 Compare September 12, 2020 19:53

mbrookes previously requested changes Sep 12, 2020

View reviewed changes

oliviertassinari force-pushed the docs-data-grid-v15 branch 2 times, most recently from 5f28daa to b5ce5c2 Compare September 13, 2020 00:18

oliviertassinari and others added 3 commits September 13, 2020 12:56

[docs] Add Rendering section

f302218

Matt review

4612fd8

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

[docs] Add Rendering section

6f964f9

oliviertassinari force-pushed the docs-data-grid-v15 branch 2 times, most recently from a34476d to e4bc305 Compare September 13, 2020 18:12

last iteration

ddc5d54

oliviertassinari force-pushed the docs-data-grid-v15 branch from e4bc305 to ddc5d54 Compare September 13, 2020 18:13

oliviertassinari marked this pull request as ready for review September 13, 2020 18:13

oliviertassinari commented Sep 13, 2020

View reviewed changes

oliviertassinari force-pushed the docs-data-grid-v15 branch from 94224b9 to f7bee21 Compare September 13, 2020 18:29

oliviertassinari requested a review from mbrookes September 13, 2020 18:36

fix typos

af79aaf

oliviertassinari force-pushed the docs-data-grid-v15 branch from f7bee21 to af79aaf Compare September 13, 2020 18:41

dtassone reviewed Sep 14, 2020

View reviewed changes

dtassone approved these changes Sep 14, 2020

View reviewed changes

damien's review

87d79f2

oliviertassinari merged commit 0b310e3 into mui:master Sep 14, 2020

oliviertassinari deleted the docs-data-grid-v15 branch September 14, 2020 11:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Add Rendering section #267

[docs] Add Rendering section #267

oliviertassinari commented Sep 12, 2020 •

edited

Loading

oliviertassinari Sep 13, 2020

oliviertassinari Sep 13, 2020

oliviertassinari Sep 13, 2020

oliviertassinari Sep 13, 2020

oliviertassinari Sep 13, 2020

oliviertassinari Sep 13, 2020

oliviertassinari Sep 13, 2020

oliviertassinari Sep 13, 2020

oliviertassinari Sep 13, 2020 •

edited

Loading

oliviertassinari Sep 13, 2020

dtassone Sep 14, 2020

oliviertassinari Sep 14, 2020

dtassone commented Sep 14, 2020

oliviertassinari commented Sep 14, 2020 •

edited

Loading

		!width ? null : <Cell key="empty-col-left" width={width} />,
		!width ? null : <Cell width={width} />,

		color: theme.palette.text.primary,
		...theme.typography.body2,

		<RightEmptyCell key="right-empty" width={renderCtx.rightEmptyWidth} />
		<RightEmptyCell width={renderCtx.rightEmptyWidth} />

		const componentParams: ComponentParams = React.useMemo(
		const componentProps: ComponentProps = React.useMemo(

[docs] Add Rendering section #267

[docs] Add Rendering section #267

Conversation

oliviertassinari commented Sep 12, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Sep 13, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dtassone commented Sep 14, 2020

oliviertassinari commented Sep 14, 2020 • edited Loading

oliviertassinari commented Sep 12, 2020 •

edited

Loading

oliviertassinari Sep 13, 2020 •

edited

Loading

oliviertassinari commented Sep 14, 2020 •

edited

Loading