diff --git a/packages/DataGrid/src/DataGrid.js b/packages/DataGrid/src/DataGrid.js
index 893a1ce3d2..314134606a 100644
--- a/packages/DataGrid/src/DataGrid.js
+++ b/packages/DataGrid/src/DataGrid.js
@@ -92,16 +92,17 @@ const DataGrid = React.forwardRef((props, ref) => {
const overscanColumnCount = 2;
const rowCount = data.length;
-
- const { ColumnDefinitions, Basement, InfiniteScroll } = React.useMemo(() => {
- const {
- "DataGrid.ColumnDefinition": ColumnDefinitions,
- "DataGrid.Basement": Basement,
- "DataGrid.InfiniteScroll": InfiniteScroll,
- } = extractChildren(children, ["DataGrid.ColumnDefinition", "DataGrid.Basement", "DataGrid.InfiniteScroll"]);
-
- return { ColumnDefinitions, Basement, InfiniteScroll };
- }, [children]);
+ const {
+ "DataGrid.ColumnDefinition": extractedColumnDefinitions,
+ "DataGrid.Basement": Basement,
+ "DataGrid.InfiniteScroll": InfiniteScroll,
+ } = extractChildren(children, ["DataGrid.ColumnDefinition", "DataGrid.Basement", "DataGrid.InfiniteScroll"]);
+
+ let ColumnDefinitions = extractedColumnDefinitions;
+ if (!Array.isArray(extractedColumnDefinitions)) {
+ // when there is only one component extracted function return the element not an array of elements
+ ColumnDefinitions = [extractedColumnDefinitions];
+ }
const columnCount = ColumnDefinitions.length;
@@ -397,21 +398,23 @@ const DataGrid = React.forwardRef((props, ref) => {
// Using lazy import because in some cases document.body is null but mouse-wheel
// depends on document.body being not null. Therefore we need to lazy import the mouse-wheel library.
import("mouse-wheel").then(module => {
- const { default: mouseWheel } = module;
- mouseWheel(refScrollGrid.current, (dx, dy, dz, event) => {
- event.preventDefault();
- refScrollGrid.current.scrollTo(refScrollGrid.current.scrollLeft + dx, refScrollGrid.current.scrollTop + dy);
- });
-
- mouseWheel(refScrollStickyColumns.current, (dx, dy, dz, event) => {
- event.preventDefault();
- refScrollStickyColumns.current.scrollTo(
- refScrollStickyColumns.current.scrollLeft + dx,
- refScrollStickyColumns.current.scrollTop + dy
- );
- });
+ if (Array.isArray(data) && data.length) {
+ const { default: mouseWheel } = module;
+ mouseWheel(refScrollGrid.current, (dx, dy, dz, event) => {
+ event.preventDefault();
+ refScrollGrid.current.scrollTo(refScrollGrid.current.scrollLeft + dx, refScrollGrid.current.scrollTop + dy);
+ });
+
+ mouseWheel(refScrollStickyColumns.current, (dx, dy, dz, event) => {
+ event.preventDefault();
+ refScrollStickyColumns.current.scrollTo(
+ refScrollStickyColumns.current.scrollLeft + dx,
+ refScrollStickyColumns.current.scrollTop + dy
+ );
+ });
+ }
});
- }, [gridId]);
+ }, [gridId, data]);
const handleMouseOver = event => {
highlightRow({ rowIndex: event.target.dataset.rowIndex });
diff --git a/packages/DataGrid/stories/DataGrid.oneColumn.stories.js b/packages/DataGrid/stories/DataGrid.oneColumn.stories.js
new file mode 100644
index 0000000000..bf0afcf9de
--- /dev/null
+++ b/packages/DataGrid/stories/DataGrid.oneColumn.stories.js
@@ -0,0 +1,28 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import * as Sbook from "storybook/assets/styles/common.styles";
+import DataGrid from "../src";
+
+const data = [
+ {
+ name: "Josef Bican ‡",
+ },
+ {
+ name: "Romário",
+ },
+ {
+ name: "Pelé",
+ },
+];
+
+export function App() {
+ return (
+
+
+
+
+
+ );
+}
+
+storiesOf("DataGrid / regular", module).add("One column", () => );