@mui/x-data-grid-generator 7.7.0 → 7.8.0

package/modern/hooks/serverUtils.js

@@ -0,0 +1,345 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GridLogicOperator } from '@mui/x-data-grid-pro';
+import { randomInt } from '../services/random-generator';
+export const DEFAULT_DATASET_OPTIONS = {
+  dataSet: 'Commodity',
+  rowLength: 100,
+  maxColumns: 6
+};
+export const disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
+export const DEFAULT_SERVER_OPTIONS = {
+  minDelay: disableDelay ? 0 : 100,
+  maxDelay: disableDelay ? 0 : 300,
+  useCursorPagination: true
+};
+const apiRef = {};
+const simplifiedValueGetter = (field, colDef) => row => {
+  return colDef.valueGetter?.(row[row.id], row, colDef, apiRef) || row[field];
+};
+const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
+  if (!sortModel) {
+    const comparator = () => 0;
+    return comparator;
+  }
+  const sortOperators = sortModel.map(sortItem => {
+    const columnField = sortItem.field;
+    const colDef = columnsWithDefaultColDef.find(({
+      field
+    }) => field === columnField);
+    return _extends({}, sortItem, {
+      valueGetter: simplifiedValueGetter(columnField, colDef),
+      sortComparator: colDef.sortComparator
+    });
+  });
+  const comparator = (row1, row2) => sortOperators.reduce((acc, {
+    valueGetter,
+    sort,
+    sortComparator
+  }) => {
+    if (acc !== 0) {
+      return acc;
+    }
+    const v1 = valueGetter(row1);
+    const v2 = valueGetter(row2);
+    return sort === 'desc' ? -1 * sortComparator(v1, v2) : sortComparator(v1, v2);
+  }, 0);
+  return comparator;
+};
+const buildQuickFilterApplier = (filterModel, columns) => {
+  const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
+  if (quickFilterValues.length === 0) {
+    return null;
+  }
+  const appliersPerField = [];
+  const stubApiRef = {
+    current: {
+      getRowFormattedValue: (row, c) => {
+        const field = c.field;
+        return row[field];
+      }
+    }
+  };
+  columns.forEach(column => {
+    const getApplyQuickFilterFn = column?.getApplyQuickFilterFn;
+    if (getApplyQuickFilterFn) {
+      appliersPerField.push({
+        column,
+        appliers: quickFilterValues.map(quickFilterValue => {
+          return {
+            fn: getApplyQuickFilterFn(quickFilterValue, column, stubApiRef)
+          };
+        })
+      });
+    }
+  });
+  return function isRowMatchingQuickFilter(row, shouldApplyFilter) {
+    const result = {};
+
+    /* eslint-disable no-labels */
+    outer: for (let v = 0; v < quickFilterValues.length; v += 1) {
+      const filterValue = quickFilterValues[v];
+      for (let i = 0; i < appliersPerField.length; i += 1) {
+        const {
+          column,
+          appliers
+        } = appliersPerField[i];
+        const {
+          field
+        } = column;
+        if (shouldApplyFilter && !shouldApplyFilter(field)) {
+          continue;
+        }
+        const applier = appliers[v];
+        const value = row[field];
+        if (applier.fn === null) {
+          continue;
+        }
+        const isMatching = applier.fn(value, row, column, stubApiRef);
+        if (isMatching) {
+          result[filterValue] = true;
+          continue outer;
+        }
+      }
+      result[filterValue] = false;
+    }
+    /* eslint-enable no-labels */
+
+    return result;
+  };
+};
+const getQuicklyFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
+  if (filterModel === undefined || filterModel.quickFilterValues?.length === 0) {
+    return rows;
+  }
+  const isRowMatchingQuickFilter = buildQuickFilterApplier(filterModel, columnsWithDefaultColDef);
+  if (isRowMatchingQuickFilter) {
+    return rows.filter(row => {
+      const result = isRowMatchingQuickFilter(row);
+      return filterModel.quickFilterLogicOperator === GridLogicOperator.And ? Object.values(result).every(Boolean) : Object.values(result).some(Boolean);
+    });
+  }
+  return rows;
+};
+const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
+  if (filterModel === undefined || filterModel.items.length === 0) {
+    return rows;
+  }
+  const valueGetters = filterModel.items.map(({
+    field
+  }) => simplifiedValueGetter(field, columnsWithDefaultColDef.find(column => column.field === field)));
+  const filterFunctions = filterModel.items.map(filterItem => {
+    const {
+      field,
+      operator
+    } = filterItem;
+    const colDef = columnsWithDefaultColDef.find(column => column.field === field);
+    if (!colDef.filterOperators) {
+      throw new Error(`MUI: No filter operator found for column '${field}'.`);
+    }
+    const filterOperator = colDef.filterOperators.find(({
+      value
+    }) => operator === value);
+    let parsedValue = filterItem.value;
+    if (colDef.valueParser) {
+      const parser = colDef.valueParser;
+      parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x, {}, colDef, apiRef)) : parser(filterItem.value, {}, colDef, apiRef);
+    }
+    return filterOperator.getApplyFilterFn({
+      filterItem,
+      value: parsedValue
+    }, colDef);
+  });
+  if (filterModel.logicOperator === GridLogicOperator.Or) {
+    return rows.filter(row => filterModel.items.some((_, index) => {
+      const value = valueGetters[index](row);
+      return filterFunctions[index] === null ? true : filterFunctions[index](value);
+    }));
+  }
+  return rows.filter(row => filterModel.items.every((_, index) => {
+    const value = valueGetters[index](row);
+    return filterFunctions[index] === null ? true : filterFunctions[index](value);
+  }));
+};
+
+/**
+ * Simulates server data loading
+ */
+export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
+  const {
+    minDelay = 100,
+    maxDelay = 300,
+    useCursorPagination
+  } = serverOptions;
+  if (maxDelay < minDelay) {
+    throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
+  }
+  const delay = randomInt(minDelay, maxDelay);
+  const {
+    cursor,
+    page = 0,
+    pageSize
+  } = queryOptions;
+  let nextCursor;
+  let firstRowIndex;
+  let lastRowIndex;
+  let filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
+  const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+  filteredRows = [...filteredRows].sort(rowComparator);
+  const totalRowCount = filteredRows.length;
+  if (!pageSize) {
+    firstRowIndex = 0;
+    lastRowIndex = filteredRows.length;
+  } else if (useCursorPagination) {
+    firstRowIndex = cursor ? filteredRows.findIndex(({
+      id
+    }) => id === cursor) : 0;
+    firstRowIndex = Math.max(firstRowIndex, 0); // if cursor not found return 0
+    lastRowIndex = firstRowIndex + pageSize;
+    nextCursor = lastRowIndex >= filteredRows.length ? undefined : filteredRows[lastRowIndex].id;
+  } else {
+    firstRowIndex = page * pageSize;
+    lastRowIndex = (page + 1) * pageSize;
+  }
+  const hasNextPage = lastRowIndex < filteredRows.length - 1;
+  const response = {
+    returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
+    hasNextPage,
+    nextCursor,
+    totalRowCount
+  };
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(response);
+    }, delay); // simulate network latency
+  });
+};
+const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1 // the depth of the children to find relative to parentDepth, `-1` to find all
+) => {
+  const parentDepth = parentPath.length;
+  const children = [];
+  for (let i = 0; i < allRows.length; i += 1) {
+    const row = allRows[i];
+    const rowPath = row[pathKey];
+    if (!rowPath) {
+      continue;
+    }
+    if ((depth < 0 && rowPath.length > parentDepth || rowPath.length === parentDepth + depth) && parentPath.every((value, index) => value === rowPath[index])) {
+      children.push(row);
+    }
+  }
+  return children;
+};
+const getTreeDataFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
+  let filteredRows = [...rows];
+  if (filterModel && filterModel.quickFilterValues?.length > 0) {
+    filteredRows = getQuicklyFilteredRows(rows, filterModel, columnsWithDefaultColDef);
+  }
+  if ((filterModel?.items.length ?? 0) > 0) {
+    filteredRows = getFilteredRows(filteredRows, filterModel, columnsWithDefaultColDef);
+  }
+  if (filteredRows.length === rows.length || filteredRows.length === 0) {
+    return filteredRows;
+  }
+  const pathsToIndexesMap = new Map();
+  rows.forEach((row, index) => {
+    pathsToIndexesMap.set(row.path.join(','), index);
+  });
+  const includedPaths = new Set();
+  filteredRows.forEach(row => {
+    includedPaths.add(row.path.join(','));
+  });
+  const missingChildren = [];
+
+  // include missing children of filtered rows
+  filteredRows.forEach(row => {
+    const path = row.path;
+    if (path) {
+      const children = findTreeDataRowChildren(rows, path, 'path', -1);
+      children.forEach(child => {
+        const subPath = child.path.join(',');
+        if (!includedPaths.has(subPath)) {
+          missingChildren.push(child);
+        }
+      });
+    }
+  });
+  filteredRows = missingChildren.concat(filteredRows);
+  const missingParents = [];
+
+  // include missing parents of filtered rows
+  filteredRows.forEach(row => {
+    const path = row.path;
+    if (path) {
+      includedPaths.add(path.join(','));
+      for (let i = 0; i < path.length - 1; i += 1) {
+        const subPath = path.slice(0, i + 1).join(',');
+        if (!includedPaths.has(subPath)) {
+          const index = pathsToIndexesMap.get(subPath);
+          if (index !== undefined) {
+            missingParents.push(rows[index]);
+            includedPaths.add(subPath);
+          }
+        }
+      }
+    }
+  });
+  return missingParents.concat(filteredRows);
+};
+
+/**
+ * Simulates server data loading
+ */
+export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
+  const {
+    minDelay = 100,
+    maxDelay = 300
+  } = serverOptions;
+  const pathKey = 'path';
+  // TODO: Support filtering and cursor based pagination
+  if (maxDelay < minDelay) {
+    throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
+  }
+  if (queryOptions.groupKeys == null) {
+    throw new Error('serverOptions.groupKeys must be defined to compute tree data ');
+  }
+  const delay = randomInt(minDelay, maxDelay);
+
+  // apply plain filtering
+  const filteredRows = getTreeDataFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
+
+  // get root row count
+  const rootRowCount = findTreeDataRowChildren(filteredRows, []).length;
+
+  // find direct children referring to the `parentPath`
+  const childRows = findTreeDataRowChildren(filteredRows, queryOptions.groupKeys);
+  let childRowsWithDescendantCounts = childRows.map(row => {
+    const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1);
+    const descendantCount = descendants.length;
+    return _extends({}, row, {
+      descendantCount
+    });
+  });
+  if (queryOptions.sortModel) {
+    // apply sorting
+    const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+    childRowsWithDescendantCounts = [...childRowsWithDescendantCounts].sort(rowComparator);
+  }
+  if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
+    // Only paginate root rows, grid should refetch root rows when `paginationModel` updates
+    const {
+      pageSize,
+      page
+    } = queryOptions.paginationModel;
+    if (pageSize < childRowsWithDescendantCounts.length) {
+      childRowsWithDescendantCounts = childRowsWithDescendantCounts.slice(page * pageSize, (page + 1) * pageSize);
+    }
+  }
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        rows: childRowsWithDescendantCounts,
+        rootRowCount
+      });
+    }, delay); // simulate network latency
+  });
+};

package/modern/hooks/useDemoData.js

@@ -12,7 +12,7 @@ const dataCache = new LRUCache({
 });
 // Generate fake data from a seed.
 // It's about x20 faster than getRealData.
-async function extrapolateSeed(rowLength, data) {
+export async function extrapolateSeed(rowLength, data) {
   return new Promise(resolve => {
     const seed = data.rows;
     const rows = data.rows.slice();
@@ -42,7 +42,7 @@ async function extrapolateSeed(rowLength, data) {
     });
   });
 }
-const deepFreeze = object => {
+export const deepFreeze = object => {
   // Retrieve the property names defined on object
   const propNames = Object.getOwnPropertyNames(object);
 

package/modern/hooks/useMockServer.js

@@ -0,0 +1,197 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import LRUCache from 'lru-cache';
+import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
+import { getColumnsFromOptions, extrapolateSeed, deepFreeze } from './useDemoData';
+import { getRealGridData } from '../services/real-data-service';
+import { addTreeDataOptionsToDemoData } from '../services/tree-data-generator';
+import { loadServerRows, processTreeDataRows, DEFAULT_DATASET_OPTIONS, DEFAULT_SERVER_OPTIONS } from './serverUtils';
+import { randomInt } from '../services';
+const dataCache = new LRUCache({
+  max: 10,
+  ttl: 60 * 5 * 1e3 // 5 minutes
+});
+export const BASE_URL = 'https://mui.com/x/api/data-grid';
+function decodeParams(url) {
+  const params = new URL(url).searchParams;
+  const decodedParams = {};
+  const array = Array.from(params.entries());
+  for (const [key, value] of array) {
+    try {
+      decodedParams[key] = JSON.parse(decodeURIComponent(value));
+    } catch (e) {
+      decodedParams[key] = value;
+    }
+  }
+  return decodedParams;
+}
+const getInitialState = (columns, groupingField) => {
+  const columnVisibilityModel = {};
+  columns.forEach(col => {
+    if (col.hide) {
+      columnVisibilityModel[col.field] = false;
+    }
+  });
+  if (groupingField) {
+    columnVisibilityModel[groupingField] = false;
+  }
+  return {
+    columns: {
+      columnVisibilityModel
+    }
+  };
+};
+const defaultColDef = getGridDefaultColumnTypes();
+export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
+  const [data, setData] = React.useState();
+  const [index, setIndex] = React.useState(0);
+  const shouldRequestsFailRef = React.useRef(shouldRequestsFail ?? false);
+  React.useEffect(() => {
+    if (shouldRequestsFail !== undefined) {
+      shouldRequestsFailRef.current = shouldRequestsFail;
+    }
+  }, [shouldRequestsFail]);
+  const options = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
+  const columns = React.useMemo(() => {
+    return getColumnsFromOptions({
+      dataSet: options.dataSet,
+      editable: options.editable,
+      maxColumns: options.maxColumns,
+      visibleFields: options.visibleFields
+    });
+  }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
+  const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
+  const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column)), [columns]);
+  const isTreeData = options.treeData?.groupingField != null;
+  const getGroupKey = React.useMemo(() => {
+    if (isTreeData) {
+      return row => row[options.treeData.groupingField];
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options.treeData?.groupingField, isTreeData]);
+  const getChildrenCount = React.useMemo(() => {
+    if (isTreeData) {
+      return row => row.descendantCount;
+    }
+    return undefined;
+  }, [isTreeData]);
+  React.useEffect(() => {
+    const cacheKey = `${options.dataSet}-${options.rowLength}-${index}-${options.maxColumns}`;
+
+    // Cache to allow fast switch between the JavaScript and TypeScript version
+    // of the demos.
+    if (dataCache.has(cacheKey)) {
+      const newData = dataCache.get(cacheKey);
+      setData(newData);
+      return undefined;
+    }
+    let active = true;
+    (async () => {
+      let rowData;
+      const rowLength = options.rowLength;
+      if (rowLength > 1000) {
+        rowData = await getRealGridData(1000, columns);
+        rowData = await extrapolateSeed(rowLength, rowData);
+      } else {
+        rowData = await getRealGridData(rowLength, columns);
+      }
+      if (!active) {
+        return;
+      }
+      if (isTreeData) {
+        rowData = addTreeDataOptionsToDemoData(rowData, {
+          maxDepth: options.treeData?.maxDepth,
+          groupingField: options.treeData?.groupingField,
+          averageChildren: options.treeData?.averageChildren
+        });
+      }
+      if (process.env.NODE_ENV !== 'production') {
+        deepFreeze(rowData);
+      }
+      dataCache.set(cacheKey, rowData);
+      setData(rowData);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, index]);
+  const fetchRows = React.useCallback(async requestUrl => {
+    if (!data || !requestUrl) {
+      return new Promise(resolve => {
+        resolve({
+          rows: [],
+          rowCount: 0
+        });
+      });
+    }
+    const params = decodeParams(requestUrl);
+    const verbose = serverOptions?.verbose ?? true;
+    // eslint-disable-next-line no-console
+    const print = console.info;
+    if (verbose) {
+      print('MUI X: DATASOURCE REQUEST', params);
+    }
+    let getRowsResponse;
+    const serverOptionsWithDefault = {
+      minDelay: serverOptions?.minDelay ?? DEFAULT_SERVER_OPTIONS.minDelay,
+      maxDelay: serverOptions?.maxDelay ?? DEFAULT_SERVER_OPTIONS.maxDelay,
+      useCursorPagination: serverOptions?.useCursorPagination ?? DEFAULT_SERVER_OPTIONS.useCursorPagination
+    };
+    if (shouldRequestsFailRef.current) {
+      const {
+        minDelay,
+        maxDelay
+      } = serverOptionsWithDefault;
+      const delay = randomInt(minDelay, maxDelay);
+      return new Promise((_, reject) => {
+        if (verbose) {
+          print('MUI X: DATASOURCE REQUEST FAILURE', params);
+        }
+        setTimeout(() => reject(new Error('Could not fetch the data')), delay);
+      });
+    }
+    if (isTreeData /* || TODO: `isRowGrouping` */) {
+      const {
+        rows,
+        rootRowCount
+      } = await processTreeDataRows(data.rows, params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      getRowsResponse = {
+        rows: rows.slice().map(row => _extends({}, row, {
+          path: undefined
+        })),
+        rowCount: rootRowCount
+      };
+    } else {
+      // plain data
+      const {
+        returnedRows,
+        nextCursor,
+        totalRowCount
+      } = await loadServerRows(data.rows, _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
+      getRowsResponse = {
+        rows: returnedRows,
+        rowCount: totalRowCount,
+        pageInfo: {
+          nextCursor
+        }
+      };
+    }
+    return new Promise(resolve => {
+      if (verbose) {
+        print('MUI X: DATASOURCE RESPONSE', params, getRowsResponse);
+      }
+      resolve(getRowsResponse);
+    });
+  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef]);
+  return {
+    columns: columnsWithDefaultColDef,
+    initialState,
+    getGroupKey,
+    getChildrenCount,
+    fetchRows,
+    loadNewData: () => {
+      setIndex(oldIndex => oldIndex + 1);
+    }
+  };
+};

package/modern/hooks/useQuery.js

@@ -1,145 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { getGridDefaultColumnTypes, GridLogicOperator } from '@mui/x-data-grid-pro';
+import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
 import { isDeepEqual } from '@mui/x-data-grid/internals';
 import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
-import { randomInt } from '../services/random-generator';
-const apiRef = {};
-const simplifiedValueGetter = (field, colDef) => row => {
-  return colDef.valueGetter?.(row[row.id], row, colDef, apiRef) || row[field];
-};
-const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
-  if (!sortModel) {
-    const comparator = () => 0;
-    return comparator;
-  }
-  const sortOperators = sortModel.map(sortItem => {
-    const columnField = sortItem.field;
-    const colDef = columnsWithDefaultColDef.find(({
-      field
-    }) => field === columnField);
-    return _extends({}, sortItem, {
-      valueGetter: simplifiedValueGetter(columnField, colDef),
-      sortComparator: colDef.sortComparator
-    });
-  });
-  const comparator = (row1, row2) => sortOperators.reduce((acc, {
-    valueGetter,
-    sort,
-    sortComparator
-  }) => {
-    if (acc !== 0) {
-      return acc;
-    }
-    const v1 = valueGetter(row1);
-    const v2 = valueGetter(row2);
-    return sort === 'desc' ? -1 * sortComparator(v1, v2) : sortComparator(v1, v2);
-  }, 0);
-  return comparator;
-};
-const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
-  if (filterModel === undefined || filterModel.items.length === 0) {
-    return rows;
-  }
-  const valueGetters = filterModel.items.map(({
-    field
-  }) => simplifiedValueGetter(field, columnsWithDefaultColDef.find(column => column.field === field)));
-  const filterFunctions = filterModel.items.map(filterItem => {
-    const {
-      field,
-      operator
-    } = filterItem;
-    const colDef = columnsWithDefaultColDef.find(column => column.field === field);
-    const filterOperator = colDef.filterOperators.find(({
-      value
-    }) => operator === value);
-    let parsedValue = filterItem.value;
-    if (colDef.valueParser) {
-      const parser = colDef.valueParser;
-      parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x)) : parser(filterItem.value);
-    }
-    return filterOperator?.getApplyFilterFn({
-      filterItem,
-      value: parsedValue
-    }, colDef);
-  });
-  if (filterModel.logicOperator === GridLogicOperator.Or) {
-    return rows.filter(row => filterModel.items.some((_, index) => {
-      const value = valueGetters[index](row);
-      return filterFunctions[index] === null ? true : filterFunctions[index]({
-        value
-      });
-    }));
-  }
-  return rows.filter(row => filterModel.items.every((_, index) => {
-    const value = valueGetters[index](row);
-    return filterFunctions[index] === null ? true : filterFunctions[index](value);
-  }));
-};
-
-/**
- * Simulates server data loading
- */
-export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
-  const {
-    minDelay = 100,
-    maxDelay = 300,
-    useCursorPagination
-  } = serverOptions;
-  if (maxDelay < minDelay) {
-    throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
-  }
-  const delay = randomInt(minDelay, maxDelay);
-  const {
-    cursor,
-    page = 0,
-    pageSize
-  } = queryOptions;
-  let nextCursor;
-  let firstRowIndex;
-  let lastRowIndex;
-  let filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
-  const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
-  filteredRows = [...filteredRows].sort(rowComparator);
-  const totalRowCount = filteredRows.length;
-  if (!pageSize) {
-    firstRowIndex = 0;
-    lastRowIndex = filteredRows.length;
-  } else if (useCursorPagination) {
-    firstRowIndex = cursor ? filteredRows.findIndex(({
-      id
-    }) => id === cursor) : 0;
-    firstRowIndex = Math.max(firstRowIndex, 0); // if cursor not found return 0
-    lastRowIndex = firstRowIndex + pageSize;
-    nextCursor = lastRowIndex >= filteredRows.length ? undefined : filteredRows[lastRowIndex].id;
-  } else {
-    firstRowIndex = page * pageSize;
-    lastRowIndex = (page + 1) * pageSize;
-  }
-  const hasNextPage = lastRowIndex < filteredRows.length - 1;
-  const response = {
-    returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
-    nextCursor,
-    hasNextPage,
-    totalRowCount
-  };
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(response);
-    }, delay); // simulate network latency
-  });
-};
-const DEFAULT_DATASET_OPTIONS = {
-  dataSet: 'Commodity',
-  rowLength: 100,
-  maxColumns: 6
-};
-const disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
-const DEFAULT_SERVER_OPTIONS = {
-  minDelay: disableDelay ? 0 : 100,
-  maxDelay: disableDelay ? 0 : 300,
-  useCursorPagination: true
-};
+import { DEFAULT_DATASET_OPTIONS, DEFAULT_SERVER_OPTIONS, loadServerRows } from './serverUtils';
 export const createFakeServer = (dataSetOptions, serverOptions) => {
   const dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
   const serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);