@elliemae/ds-datagrids 3.16.0-next.2 → 3.16.0-next.20

package/dist/esm/DSDataGrid.js

@@ -1,16 +1,19 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { PropTypes, describe } from "@elliemae/ds-utilities";
+import { useDeprecateComponent } from "@elliemae/ds-utilities";
+import { PropTypes, describe } from "@elliemae/ds-props-helpers";
 import { TooltipTextProvider } from "@elliemae/ds-truncated-tooltip-text";
-import { DataGridImpl } from "./DataGridImpl";
-import { RowSizesOptions, RowSizesOptionsArr } from "./rowSizes";
+import { DataGridImpl } from "./DataGridImpl.js";
+import { RowSizesOptions, RowSizesOptionsArr } from "./rowSizes.js";
 const DSDataGrids = ({
   containerProps = {},
   instanceRef,
   className = "",
+  // data
   columns = [],
   rows = [],
   rowKey = "id",
+  // features
   infiniteScrolling = false,
   editable = false,
   sortable = false,
@@ -23,8 +26,11 @@ const DSDataGrids = ({
   dragAndDropColumns = false,
   useTreeData = false,
   autoScrollToId,
+  // virtualization props
   overscanCount = 10,
+  // feature state
   selectAll = false,
+  // todo: change to isAllSelected
   selectedRows = [],
   filters = void 0,
   onAddFilter = () => null,
@@ -40,6 +46,7 @@ const DSDataGrids = ({
   aggregations = {},
   groupingColumn = void 0,
   sortingColumns = {},
+  // pagination
   minPerPage = 0,
   maxPerPage = 50,
   onPerPageChange = () => null,
@@ -49,6 +56,7 @@ const DSDataGrids = ({
     page: 1,
     perPage: 10
   },
+  // visual
   showHeader = true,
   fixedHeader = true,
   wrapText = false,
@@ -56,21 +64,26 @@ const DSDataGrids = ({
   minColumnWidth = 100,
   showRowsLoader = false,
   visibleColumns = void 0,
+  // this enforces visibility of columns
   showSelectHighlight = false,
   showSelectColumn = true,
   selectColumnSortable = true,
   selectColumnFilterable = false,
   selectionColumnDefinition = {},
   filterBarOptions = void 0,
+  // searchGrid = false,
   renderToolbar = void 0,
   toolbarDelayClose = 400,
   renderFilterToolbar = void 0,
   multiSelectComponent = void 0,
+  // todo: deprecate this
   noResultsRender,
   noResultsPlaceholder,
   fluidHeight = false,
   customHandlers = {},
+  // grouping feature
   groupedBy = void 0,
+  // callbacks
   onDefaultFiltersLoad = () => null,
   onReorder = () => null,
   onMoveRowEnd = () => null,
@@ -92,14 +105,17 @@ const DSDataGrids = ({
   onFilterMenuClose = () => null,
   onFilterMenuOpen = () => null,
   getData = void 0,
+  // todo: change to onGetMoreData
   serverSideData = false,
   isDataSorted = false,
   isDataFiltered = false,
   virtualized = true,
   numRowsVisible = void 0,
   isColumnEditable = (column) => column.editable,
+  // grouped props
   groupedRows = false,
   groupedRowsRenderHeader = void 0,
+  // expandable props
   renderExpandedDetails = () => null,
   detailColumns,
   expandable = false,
@@ -118,284 +134,415 @@ const DSDataGrids = ({
   noColumnsPlaceholder,
   plugins = [],
   normalizeDataKeys = false
-}) => /* @__PURE__ */ jsx(TooltipTextProvider, { children: /* @__PURE__ */ jsx(
-  DataGridImpl,
-  {
-    aggregations,
-    autoHeight: autoHeight && !fluidHeight,
-    autoScrollToId,
-    bindColumnsSizeTo,
-    bindRowSizeTo,
-    className,
-    columns,
-    containerProps,
-    customHandlers,
-    detailColumns,
-    dragAndDropColumns,
-    dragAndDropRows,
-    editable,
-    expandable,
-    expandableSubrowsVisible,
-    expandedRows,
-    filterBarOptions,
-    filters,
-    fixedHeader,
-    fluidHeight,
-    getChildrenRows,
-    getData,
-    getExpandedRowMinSize,
-    getExpandedRowSize,
-    groupedBy,
-    groupedRows,
-    groupedRowsRenderHeader,
-    groupingColumn,
-    height,
-    infiniteScrolling,
-    instanceRef,
-    isColumnEditable,
-    isDataFiltered,
-    isDataSorted,
-    maxPerPage,
-    minColumnWidth,
-    minPerPage,
-    multiSelectComponent,
-    multiSelectFilterLabel,
-    multiSelectFilterLabels,
-    multiSelectFilterOptions,
-    noColumnsPlaceholder,
-    noResultsPlaceholder,
-    noResultsRender,
-    normalizeDataKeys,
-    numRowsVisible,
-    onAddFilter,
-    onColumnResize,
-    onColumnRowEdit,
-    onColumnRowEdited,
-    onExpandRow,
-    onExpandChange,
-    onFilter,
-    onFiltersChange,
-    onFilterMenuClose,
-    onFilterMenuOpen,
-    onDefaultFiltersLoad,
-    onInfiniteScrolling,
-    onMoveColumnEnd,
-    onMoveColumnOver,
-    onMoveColumnStart,
-    onMoveRowEnd,
-    onMoveRowStart,
-    onPageChange,
-    onPerPageChange,
-    onRemoveFilter,
-    onReorder,
-    onSelectAll,
-    onSelectRow,
-    onSort,
-    onToggleExpand,
-    onToggleShowAllRows,
-    overscanCount,
-    paginated,
-    pagination,
-    paginationStep,
-    plugins,
-    renderExpandedDetails,
-    renderFilterToolbar,
-    renderRowDetails,
-    renderToolbar,
-    resizeableColumns,
-    rowKey,
-    rows,
-    rowSize,
-    searchFilters,
-    selectable,
-    selectAll,
-    selectColumnFilterable,
-    selectColumnSortable,
-    selectedRows,
-    selectionColumnDefinition,
-    serverSideData,
-    showFilterBar,
-    showHeader,
-    showRowsLoader,
-    showSelectColumn,
-    showSelectHighlight,
-    sortable,
-    sortEmptyLast,
-    sortingColumns,
-    subrowSize: subRowSize,
-    toolbarDelayClose,
-    useTreeData,
-    virtualized,
-    visibleColumns,
-    wrapText
-  }
-) });
+}) => {
+  useDeprecateComponent({ componentName: "ds-datagrids", version: "3.x Date: 2023 Q1" });
+  return /* @__PURE__ */ jsx(TooltipTextProvider, { children: /* @__PURE__ */ jsx(
+    DataGridImpl,
+    {
+      aggregations,
+      autoHeight: autoHeight && !fluidHeight,
+      autoScrollToId,
+      bindColumnsSizeTo,
+      bindRowSizeTo,
+      className,
+      columns,
+      containerProps,
+      customHandlers,
+      detailColumns,
+      dragAndDropColumns,
+      dragAndDropRows,
+      editable,
+      expandable,
+      expandableSubrowsVisible,
+      expandedRows,
+      filterBarOptions,
+      filters,
+      fixedHeader,
+      fluidHeight,
+      getChildrenRows,
+      getData,
+      getExpandedRowMinSize,
+      getExpandedRowSize,
+      groupedBy,
+      groupedRows,
+      groupedRowsRenderHeader,
+      groupingColumn,
+      height,
+      infiniteScrolling,
+      instanceRef,
+      isColumnEditable,
+      isDataFiltered,
+      isDataSorted,
+      maxPerPage,
+      minColumnWidth,
+      minPerPage,
+      multiSelectComponent,
+      multiSelectFilterLabel,
+      multiSelectFilterLabels,
+      multiSelectFilterOptions,
+      noColumnsPlaceholder,
+      noResultsPlaceholder,
+      noResultsRender,
+      normalizeDataKeys,
+      numRowsVisible,
+      onAddFilter,
+      onColumnResize,
+      onColumnRowEdit,
+      onColumnRowEdited,
+      onExpandRow,
+      onExpandChange,
+      onFilter,
+      onFiltersChange,
+      onFilterMenuClose,
+      onFilterMenuOpen,
+      onDefaultFiltersLoad,
+      onInfiniteScrolling,
+      onMoveColumnEnd,
+      onMoveColumnOver,
+      onMoveColumnStart,
+      onMoveRowEnd,
+      onMoveRowStart,
+      onPageChange,
+      onPerPageChange,
+      onRemoveFilter,
+      onReorder,
+      onSelectAll,
+      onSelectRow,
+      onSort,
+      onToggleExpand,
+      onToggleShowAllRows,
+      overscanCount,
+      paginated,
+      pagination,
+      paginationStep,
+      plugins,
+      renderExpandedDetails,
+      renderFilterToolbar,
+      renderRowDetails,
+      renderToolbar,
+      resizeableColumns,
+      rowKey,
+      rows,
+      rowSize,
+      searchFilters,
+      selectable,
+      selectAll,
+      selectColumnFilterable,
+      selectColumnSortable,
+      selectedRows,
+      selectionColumnDefinition,
+      serverSideData,
+      showFilterBar,
+      showHeader,
+      showRowsLoader,
+      showSelectColumn,
+      showSelectHighlight,
+      sortable,
+      sortEmptyLast,
+      sortingColumns,
+      subrowSize: subRowSize,
+      toolbarDelayClose,
+      useTreeData,
+      virtualized,
+      visibleColumns,
+      wrapText
+    }
+  ) });
+};
 const props = {
+  /** ref to the instance of the datagrid, handle it imperatively */
   instanceRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(
     "ref to the instance of the datagrid, handle it imperatively"
   ),
+  /** class for data grid wrapper */
   className: PropTypes.string.description("class for data grid wrapper"),
+  /** inject props to datagrid wrapper */
   containerProps: PropTypes.object.description("inject props to datagrid wrapper"),
+  /** FilterBar props passed down to FilterBar */
   filterBarOptions: PropTypes.shape({
     minWidth: PropTypes.number,
     maxWidth: PropTypes.number
   }).description("FilterBar props passed down to FilterBar"),
+  /** datagrid columns */
   columns: PropTypes.arrayOf(
     PropTypes.shape({
+      /** Column property as an identifier */
       property: PropTypes.string.isRequired,
+      /** Label in the header */
       label: PropTypes.string,
+      /** Defines the width of the column, can be a string with percentages ("50%"), if not defined the width is flexible */
       width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      /** Min width for this column. NOTE: Has prevalence over the general minColumnWidth */
       minWidth: PropTypes.number,
+      /** Function returning a custom editor for that cell ({ value, onValue, rowData }) => Element */
       customEditor: PropTypes.func,
+      /** Function returning an element to render in the cell ({ value, customHandlers, metaData: { rowData } }) => Element */
       customRenderer: PropTypes.func,
+      /** Activates 'searchable' feature for this column */
       searchable: PropTypes.bool,
+      /** Activates 'sortable' feature for this column */
       sortable: PropTypes.bool,
+      /** Activates 'resizable' feature for this column */
       resizable: PropTypes.bool,
+      /** Activates 'editable' feature for this column */
       editable: PropTypes.bool,
+      /** Whether this column is visible or not */
       visible: PropTypes.bool
     })
   ).description("datagrid columns"),
+  /** datagrid rows */
   rows: PropTypes.arrayOf(PropTypes.object).description("datagrid rows"),
+  /** key for each row */
   rowKey: PropTypes.string.description("key for each row"),
+  /** toggle infinite scroll loading behavior */
   infiniteScrolling: PropTypes.bool.description("toggle infinite scroll loading behavior"),
+  /** Activates 'editable' feature on the DataGrid NOTE: needs to be activated in the column definition as well */
   overscanCount: PropTypes.number.description(
     "Activates 'editable' feature on the DataGrid NOTE: needs to be activated in the column definition as well"
   ),
+  /** turn datagrid to editable mode */
   editable: PropTypes.bool.description("turn datagrid to editable mode"),
+  /** Activates 'sortable' feature on the GataGrid NOTE: needs to be activated in the column definition as well */
   sortable: PropTypes.bool.description(
     "Activates 'sortable' feature on the GataGrid NOTE: needs to be activated in the column definition as well"
   ),
+  /** Put empty values always last on the column after sorting */
   sortEmptyLast: PropTypes.bool.description("Put empty values always last on the column after sorting"),
+  /** Activates 'pagination' feature on the datagrid NOTE: needs to be activated in the column definition as well */
   paginated: PropTypes.bool.description(
     "Activates 'pagination' feature on the datagrid NOTE: needs to be activated in the column definition as well"
   ),
+  /** Pagination step for clicking the next pages */
   paginationStep: PropTypes.number.description("Pagination step for clicking the next pages"),
+  /** Activates 'drag and drop rows' feature on the datagrid NOTE: needs to be activated in the column definition as well */
   dragAndDropRows: PropTypes.bool.description(
     "Activates 'drag and drop rows' feature on the datagrid NOTE: needs to be activated in the column definition as well"
   ),
+  /** Activates 'selection' feature on the datagrid NOTE: needs to be activated in the column definition as well */
   selectable: PropTypes.bool.description(
     "Activates 'selection' feature on the datagrid NOTE: needs to be activated in the column definition as well"
   ),
+  /** Activates 'resize' feature on the datagrid NOTE: needs to be activated in the column definition as well */
   resizeableColumns: PropTypes.bool.description(
     "Activates 'resize' feature on the datagrid NOTE: needs to be activated in the column definition as well"
   ),
+  /** Placeholder rendered when no rows are visible */
   noResultsPlaceholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(
     "Placeholder rendered when no rows are visible"
   ),
+  /** Activates 'filtering' feature on the datagrid NOTE: needs to be activated in the column definition as well */
   searchFilters: PropTypes.bool.description(
     "activates 'filtering' feature on the datagrid NOTE: needs to be activated in the column definition as well"
   ),
+  /** Activates 'drag and drop columns' feature on the datagrid NOTE: needs to be activated in the column definition as well */
   dragAndDropColumns: PropTypes.bool.description(
     "Activates 'drag and drop columns' feature on the datagrid NOTE: needs to be activated in the column definition as well"
   ),
+  /** Activates 'grouping and tree data' feature on the datagrid NOTE: needs to be activated in the column definition as well */
   useTreeData: PropTypes.bool.description(
     "activates 'grouping and tree data' feature on the datagrid NOTE: needs to be activated in the column definition as well"
   ),
+  /** AutoScroll to row ID */
   autoScrollToId: PropTypes.any.description("AutoScroll to row ID"),
+  /** Whether all rows are selected or not */
   selectAll: PropTypes.bool.description("Whether all rows are selected or not"),
+  /** Defines the selected rows */
   selectedRows: PropTypes.arrayOf(PropTypes.object).description(" Defines the selected rows"),
+  /** Filters to be applied to the grid */
   filters: PropTypes.arrayOf(PropTypes.object).description("Filters to be applied to the grid"),
+  // todo: define params for handlers
+  /** Handler when user expands a row */
   onExpandRow: PropTypes.func.description("Handler when user expands a row"),
+  /** Handler when user expands a row with full expand state */
   onExpandChange: PropTypes.func.description("Handler when user expands a row with full expand state"),
+  /** Handler when user expands a row (old API) */
   onToggleExpand: PropTypes.func.description("Handler when user expands a row (old API)"),
+  /** Handler when user adds a filter */
   onAddFilter: PropTypes.func.description("Handler when user adds a filter"),
+  /** Handler when user removes a filter */
   onRemoveFilter: PropTypes.func.description("Handler when user removes a filter"),
+  /** Handler when the filters state has changed */
   onFiltersChange: PropTypes.func.description("Handler when the filters state has changed "),
+  /** Handler when the default filters load. Returns the rows rendered */
   onDefaultFiltersLoad: PropTypes.func.description("Handler when the default filters load. Returns the rows rendered"),
+  /** Handler when column move is over another column */
   onMoveColumnOver: PropTypes.func.description("Handler when column move is over another column"),
+  /** Handler when column move starts */
   onMoveColumnStart: PropTypes.func.description(" Handler when column move starts"),
+  /** Handler when column move ends */
   onMoveColumnEnd: PropTypes.func.description("Handler when column move ends"),
+  /** Whether to show the filter bar or not */
   showFilterBar: PropTypes.bool.description("Whether to show the filter bar or not"),
+  /** Custom option for the header with multi select */
   multiSelectFilterOptions: PropTypes.arrayOf(PropTypes.object).description(
     "Custom option for the header with multi select"
   ),
+  /** Label to the header column for multi select */
   multiSelectFilterLabel: PropTypes.string.description("Label to the header column for multi select"),
+  /** Labels for multi selects */
   multiSelectFilterLabels: PropTypes.arrayOf(PropTypes.string).description("Labels for multi selects"),
+  /** unstable */
   aggregations: PropTypes.object.description("").deprecated(""),
+  /** unstable */
+  /** Column which rows would be grouped by */
   groupingColumn: PropTypes.string.description("Column which rows would be grouped by").deprecated(""),
+  /** group by */
   groupedBy: PropTypes.string.description("group by"),
+  /** Defines the sorting state */
   sortingColumns: PropTypes.objectOf(
     PropTypes.shape({
+      // eslint-disable-next-line react/no-unused-prop-types
       direction: PropTypes.oneOf(["asc", "desc"]),
+      // eslint-disable-next-line react/no-unused-prop-types
       position: PropTypes.number
     })
   ).description("Defines the sorting state"),
+  /** Visible columns property */
   visibleColumns: PropTypes.arrayOf(PropTypes.string).description("Visible columns property"),
+  /** Pagination: Minimum number of rows per page */
   minPerPage: PropTypes.string.description("Pagination: Minimum number of rows per page"),
+  /** Pagination: Maximum number of rows per page */
   maxPerPage: PropTypes.string.description("Pagination: Maximum number of rows per page"),
+  /** Pagination: Handler when user changes the amount of rows per page */
   onPerPageChange: PropTypes.string.description("Pagination: Handler when user changes the amount of rows per page"),
+  /** Pagination: Handler when user changes the page */
   onPageChange: PropTypes.string.description("Pagination: Handler when user changes the page"),
+  /** Pagination state */
   pagination: PropTypes.shape({
+    // eslint-disable-next-line react/no-unused-prop-types
     page: PropTypes.number,
+    // eslint-disable-next-line react/no-unused-prop-types
     perPage: PropTypes.number
   }).description("pagination state"),
+  /** Whether to show the header or not */
   showHeader: PropTypes.bool.description("Whether to show the header or not"),
+  /** Whether to header is fixed or not */
   fixedHeader: PropTypes.bool.description("Whether to header is fixed or not"),
+  /** Defines the height of the DataGrid */
   height: PropTypes.number.description("Defines the height of the DataGrid"),
+  /** General min column width for all the columns */
   minColumnWidth: PropTypes.number.description("General min column width for all the columns "),
+  /** Whether to show a loader instead of the rows or not */
   showRowsLoader: PropTypes.bool.description("Whether to show a loader instead of the rows or not"),
+  /** When a user selects a row, that row get highlighted */
   showSelectHighlight: PropTypes.bool.description("When a user selects a row, that row get highlighted"),
+  /** Whether to show the select column when the selection feature is active */
   showSelectColumn: PropTypes.bool.description(
     "Whether to show the select column when the selection feature is active"
   ),
+  /** Activates sortable feature to selection column */
   selectColumnSortable: PropTypes.bool.description("activates sortable feature to selection column"),
+  /** Activates filterable feature to selection column */
   selectColumnFilterable: PropTypes.bool.description("Activates filterable feature to selection column"),
+  /** Define the definition for the selection column */
   selectionColumnDefinition: PropTypes.object.description("Define the definition for the selection column"),
+  /** Function that returns a toolbar to show when the user hovers the row */
   renderToolbar: PropTypes.func.description("Function that returns a toolbar to show when the user hovers the row"),
+  /** Timeout to close the toolbar */
   toolbarDelayClose: PropTypes.number.description(" Timeout to close the toolbar"),
+  /** Function that returns a toolbar in the FilterBar component */
   renderFilterToolbar: PropTypes.func.description("Function that returns a toolbar in the FilterBar component"),
+  /** Custom component for the selection */
   multiSelectComponent: PropTypes.element.description("Custom component for the selection"),
+  /** Normalize the keys of the data received and the columns */
   normalizeDataKeys: PropTypes.bool.description("Normalize the keys of the data received and the columns"),
+  /** Function that returns an Element when there are no rows */
   noResultsRender: PropTypes.func.description("Function that returns an Element when there are no rows"),
+  /** The height of the DataGrid will expand to its container */
   fluidHeight: PropTypes.bool.description("The height of the DataGrid will expand to its container"),
+  /** @deprecated */
   customHandlers: PropTypes.object.description("").deprecated(""),
+  /** Handler when user closes the filter menu */
   onFilterMenuClose: PropTypes.func.description("Handler when user closes the filter menu"),
+  /** Handler when user opens the filter menu */
   onFilterMenuOpen: PropTypes.func.description("Handler when user opens the filter menu"),
+  /** Handler when user drags a row */
   onReorder: PropTypes.func.description("handler when user drags a row "),
+  /** Handler when user stops dragging a row */
   onMoveRowEnd: PropTypes.func.description("Handler when user stops dragging a row "),
+  /** Handler when user starts dragging a row */
   onMoveRowStart: PropTypes.func.description("Handler when user starts dragging a row"),
+  /** Handler when user has resized a column */
   onColumnResize: PropTypes.func.description("Handler when user has resized a column"),
+  /** Handler when user filters by a column */
   onFilter: PropTypes.func.description("Handler when user filters by a column"),
+  /** Handler when user sorts by a column */
   onSort: PropTypes.func.description("Handler when user sorts by a column "),
+  /** Handler when user has edited a cell row */
   onColumnRowEdited: PropTypes.func.description("Handler when user has edited a cell row"),
+  /** Handler when user activates the cell row editing functionality */
   onColumnRowEdit: PropTypes.func.description(" Handler when user activates the cell row editing functionality"),
+  /** Handler when user selects a row */
   onSelectRow: PropTypes.func.description("Handler when user selects a row"),
+  /** Handler when user checks the selection header controller */
   onSelectAll: PropTypes.func.description("Handler when user checks the selection header controller"),
+  /** Handler to get more data when infinite scroll is activated */
   getData: PropTypes.func.description("Handler to get more data when infinite scroll is activated"),
+  /** Handler to get more data when infinite scroll is activated without side-effect */
   onInfiniteScrolling: PropTypes.func.description(
     "Handler to get more data when infinite scroll is activated without side-effect"
   ),
+  /** Flag to override empty sort when data is from server */
   serverSideData: PropTypes.bool.description("Flag to override empty sort when data is from server"),
+  /** Flag to force virtualization. Not used */
   virtualized: PropTypes.bool.description("Flag to force virtualization. Not used"),
-  numRowsVisible: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["all"])]).description("Number of rows visible. Not used"),
+  /** Number of rows visible. Not used */
+  numRowsVisible: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["all"])]).description(
+    "Number of rows visible. Not used"
+  ),
+  /** Callback to check if column is editable */
   isColumnEditable: PropTypes.func.description("Callback to check if column is editable"),
+  /** Flag for groupedRows */
   groupedRows: PropTypes.bool.description("Flag for groupedRows"),
-  groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description("Header for grouped rows"),
+  /** Header for grouped rows */
+  groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description(
+    "Header for grouped rows"
+  ),
+  /** Once activated will disable the internal logic for sorting */
   isDataSorted: PropTypes.bool.description("Once activated will disable the internal logic for sorting"),
+  /** Once activated will disable the internal logic for filtering */
   isDataFiltered: PropTypes.bool.description("Once activated will disable the internal logic for filtering"),
+  /** Change row size */
   rowSize: PropTypes.oneOf(RowSizesOptionsArr).description("Change row size"),
+  /** Whether to wrap the text of the data grid or not */
   wrapText: PropTypes.bool.description("Whether to wrap the text of the data grid or not"),
+  /** Element to render expanded details */
   renderExpandedDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description(
     "Element to render expanded details"
   ),
+  /** Columns to render on the details of an expanded row */
   detailColumns: PropTypes.arrayOf(PropTypes.object).description("Columns to render on the details of an expanded row"),
+  /** Flag to enable the expandable feature */
   expandable: PropTypes.bool.description("Flag to enable the expandable feature "),
+  /** Callback to get the row children */
   getChildrenRows: PropTypes.func.description("Callback to get the row children"),
+  /** Number of rows visible on the details of an expanded row */
   expandableSubrowsVisible: PropTypes.number.description("Number of rows visible on the details of an expanded row"),
+  /** Element to render inside expanded row */
   renderRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description(
     "Element to render inside expanded row"
   ),
+  /** Callback to get the expanded row size */
   getExpandedRowSize: PropTypes.func.description("Callback to get the expanded row size"),
+  /** Callback to get the expanded row minimum size */
   getExpandedRowMinSize: PropTypes.func.description("Callback to get the expanded row minimum size"),
+  /** Change expanded/details rows size */
   subRowSize: PropTypes.oneOf(RowSizesOptionsArr).description("Change expanded/details rows size"),
+  /** Bind the column size to another grid instance */
   bindColumnsSizeTo: PropTypes.string.description("Bind the column size to another grid instance"),
+  /** Bind the row size to another grid instance */
   bindRowSizeTo: PropTypes.string.description("Bind the row size to another grid instance"),
+  /** Handler when toggle show all is clicked  */
   onToggleShowAllRows: PropTypes.func.description("Handler when toggle show all is clicked"),
+  /** Expanded row state */
   expandedRows: PropTypes.object.description("Expanded row state"),
+  /** Flag to enable autoheight */
   autoHeight: PropTypes.bool.description("Flag to enable autoheight"),
+  /** Placeholder rendered when no columns are visible */
   noColumnsPlaceholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(
     "Placeholder rendered when no columns are visible"
   ),
+  /** Plugin additional array */
   plugins: PropTypes.arrayOf(PropTypes.any).description("Plugin additional array")
 };
 DSDataGrids.propTypes = props;