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", () => );