@linzjs/step-ag-grid 23.0.1 → 25.0.0

package/src/react-menu3/utils/constants.ts

@@ -1,15 +1,15 @@
-import { MenuState } from "../types";
+import { MenuState } from '../types';
 
-export const menuContainerClass = "szh-menu-container";
-export const menuClass = "szh-menu";
-export const menuButtonClass = "szh-menu-button";
-export const menuArrowClass = "arrow";
-export const menuItemClass = "item";
-export const menuDividerClass = "divider";
-export const menuHeaderClass = "header";
-export const menuGroupClass = "group";
-export const subMenuClass = "submenu";
-export const radioGroupClass = "radio-group";
+export const menuContainerClass = 'szh-menu-container';
+export const menuClass = 'szh-menu';
+export const menuButtonClass = 'szh-menu-button';
+export const menuArrowClass = 'arrow';
+export const menuItemClass = 'item';
+export const menuDividerClass = 'divider';
+export const menuHeaderClass = 'header';
+export const menuGroupClass = 'group';
+export const subMenuClass = 'submenu';
+export const radioGroupClass = 'radio-group';
 
 export interface RMEvent {
   value: any;
@@ -21,16 +21,16 @@ export interface RMEvent {
 }
 
 export const Keys = Object.freeze({
-  ENTER: "Enter",
-  TAB: "Tab",
-  ESC: "Escape",
-  SPACE: " ",
-  HOME: "Home",
-  END: "End",
-  LEFT: "ArrowLeft",
-  RIGHT: "ArrowRight",
-  UP: "ArrowUp",
-  DOWN: "ArrowDown",
+  ENTER: 'Enter',
+  TAB: 'Tab',
+  ESC: 'Escape',
+  SPACE: ' ',
+  HOME: 'Home',
+  END: 'End',
+  LEFT: 'ArrowLeft',
+  RIGHT: 'ArrowRight',
+  UP: 'ArrowUp',
+  DOWN: 'ArrowDown',
 });
 
 export const HoverActionTypes = Object.freeze({
@@ -45,22 +45,22 @@ export const HoverActionTypes = Object.freeze({
 });
 
 export const CloseReason = Object.freeze({
-  CLICK: "click",
-  CANCEL: "cancel",
-  BLUR: "blur",
-  SCROLL: "scroll",
-  TAB_FORWARD: "tab_forward",
-  TAB_BACKWARD: "tab_backward",
+  CLICK: 'click',
+  CANCEL: 'cancel',
+  BLUR: 'blur',
+  SCROLL: 'scroll',
+  TAB_FORWARD: 'tab_forward',
+  TAB_BACKWARD: 'tab_backward',
 });
 
 export const FocusPositions = Object.freeze({
-  FIRST: "first",
-  LAST: "last",
+  FIRST: 'first',
+  LAST: 'last',
 });
 
 export const MenuStateMap: Record<string, MenuState> = Object.freeze({
-  entering: "opening",
-  entered: "open",
-  exiting: "closing",
-  exited: "closed",
+  entering: 'opening',
+  entered: 'open',
+  exiting: 'closing',
+  exited: 'closed',
 });

package/src/react-menu3/utils/index.ts

@@ -1,4 +1,3 @@
-export * from "./constants";
-export * from "./utils";
-
-export { withHovering } from "./withHovering";
+export * from './constants';
+export * from './utils';
+export { withHovering } from './withHovering';

package/src/react-menu3/utils/propTypes2.ts

@@ -1,26 +1,26 @@
-import { bool, exact, func, number, object, oneOf, oneOfType, string } from "prop-types";
+import { bool, exact, func, number, object, oneOf, oneOfType, string } from 'prop-types';
 
 export const stylePropTypes = (name?: string) => ({
-  [name ? `${name}ClassName` : "className"]: oneOfType([string, func]),
+  [name ? `${name}ClassName` : 'className']: oneOfType([string, func]),
 });
 
-export const Direction = oneOf(["left", "right", "top", "bottom"]);
+export const Direction = oneOf(['left', 'right', 'top', 'bottom']);
 
 // Menu, SubMenu and ControlledMenu
 export const menuPropTypes = {
   className: string,
-  ...stylePropTypes("menu"),
-  ...stylePropTypes("arrow"),
+  ...stylePropTypes('menu'),
+  ...stylePropTypes('arrow'),
   menuStyle: object,
   arrowStyle: object,
   arrow: bool,
   setDownOverflow: bool,
   offsetX: number,
   offsetY: number,
-  align: oneOf(["start", "center", "end"]),
+  align: oneOf(['start', 'center', 'end']),
   direction: Direction,
-  position: oneOf(["auto", "anchor", "initial"]),
-  overflow: oneOf(["auto", "visible", "hidden"]),
+  position: oneOf(['auto', 'anchor', 'initial']),
+  overflow: oneOf(['auto', 'visible', 'hidden']),
 };
 
 // Menu and ControlledMenu
@@ -40,9 +40,9 @@ export const rootMenuPropTypes = {
   transitionTimeout: number,
   boundingBoxRef: object,
   boundingBoxPadding: string,
-  reposition: oneOf(["auto", "initial"]),
+  reposition: oneOf(['auto', 'initial']),
   repositionFlag: oneOfType([string, number]),
-  viewScroll: oneOf(["auto", "close", "initial"]),
+  viewScroll: oneOf(['auto', 'close', 'initial']),
   submenuOpenDelay: number,
   submenuCloseDelay: number,
   portal: oneOfType([

package/src/react-menu3/utils/utils.ts

@@ -1,10 +1,10 @@
-import { findIndex } from "lodash-es";
-import { unstable_batchedUpdates } from "react-dom";
+import { findIndex } from 'lodash-es';
+import { unstable_batchedUpdates } from 'react-dom';
 
-import { MenuButtonProps } from "../components/MenuButton";
-import { MenuState, MenuStateOptions } from "../types";
+import { MenuButtonProps } from '../components/MenuButton';
+import { MenuState, MenuStateOptions } from '../types';
 
-export const isMenuOpen = (state?: MenuState) => !!state && state[0] === "o";
+export const isMenuOpen = (state?: MenuState) => !!state && state[0] === 'o';
 export const batchedUpdates = unstable_batchedUpdates || ((callback: () => any) => callback());
 export const values = Object.values || ((obj: { [x: string]: any }) => Object.keys(obj).map((key) => obj[key]));
 export const floatEqual = (a: number, b: number, diff = 0.0001) => Math.abs(a - b) < diff;
@@ -14,17 +14,17 @@ export type TransitionMap = {
   close?: boolean;
   item?: boolean;
 };
-export const getTransition = (transition: MenuStateOptions["transition"], name: keyof TransitionMap) =>
+export const getTransition = (transition: MenuStateOptions['transition'], name: keyof TransitionMap) =>
   transition === true || !!(transition && transition[name]);
 
 export function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): R;
 export function safeCall<T, R>(fn: T, arg: R): T;
 export function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): T | R {
-  return typeof fn === "function" ? fn(arg) : fn;
+  return typeof fn === 'function' ? fn(arg) : fn;
 }
 
-const internalKey = "_szhsinMenu";
-export const getName = (component: Record<string, any | undefined>) => component[internalKey];
+const internalKey = '_szhsinMenu';
+export const getName = (component: Record<string, any>) => component[internalKey];
 //export const defineName = <T extends any[]>(name: string, component: (...args: T) => ReactElement) =>
 //  Object.defineProperty(component, internalKey, { value: name });
 
@@ -38,7 +38,7 @@ export const mergeProps = (target: any, source: any) => {
     Object.keys(source).forEach((key) => {
       const targetProp = target[key];
       const sourceProp = source[key];
-      if (typeof sourceProp === "function" && targetProp) {
+      if (typeof sourceProp === 'function' && targetProp) {
         target[key] = (...arg: any[]) => {
           sourceProp(...arg);
           targetProp(...arg);
@@ -81,7 +81,7 @@ export const getScrollAncestor = (node: Node | null): Element | null => {
 
 export function commonProps(isDisabled?: boolean, isHovering?: boolean) {
   return {
-    "aria-disabled": isDisabled || undefined,
+    'aria-disabled': isDisabled || undefined,
     tabIndex: isHovering ? 0 : -1,
   };
 }
@@ -90,15 +90,15 @@ export const indexOfNode = (nodeList: NodeListOf<Node>, node: Node) => findIndex
 
 export const focusFirstInput = (container: any) => {
   // We can't use instanceof Element in portals, so I use querySelectorAll as a proxy here
-  if (!container || !("querySelectorAll" in container)) return false;
+  if (!container || !('querySelectorAll' in container)) return false;
   const inputs = container.querySelectorAll("input[type='text'],input:not([type]),textarea");
   const input = inputs[0];
   // Using focus as proxy for HTMLElement
-  if (!input || !("focus" in input)) return false;
+  if (!input || !('focus' in input)) return false;
   input.focus();
   // Text areas should start at end
   // this is a proxy for instanceof HTMLTextAreaElement
-  if (["textarea", "text"].includes(input.type)) {
+  if (['textarea', 'text'].includes(input.type)) {
     input.setSelectionRange(0, input.value.length);
   }
   return true;

package/src/react-menu3/utils/withHovering.tsx

@@ -1,6 +1,6 @@
-import { MutableRefObject, PropsWithRef, ReactElement, forwardRef, memo, useContext, useRef } from "react";
+import { forwardRef, memo, MutableRefObject, PropsWithRef, ReactElement, useContext, useRef } from 'react';
 
-import { HoverItemContext } from "../contexts/HoverItemContext";
+import { HoverItemContext } from '../contexts/HoverItemContext';
 
 export interface withHoveringResultProps {
   isHovering?: boolean;
@@ -18,7 +18,7 @@ export const withHovering = <X extends Record<string, any>, T extends PropsWithR
 
     return (
       <>
-        {/* @ts-ignore Can't work out what the ref issue is here */}
+        {/* @ts-expect-error Can't work out what the ref issue is here */}
         <Component
           {...props}
           menuItemRef={menuItemRef}

package/src/stories/components/ActionButton.stories.tsx

@@ -1,15 +1,14 @@
-import "@linzjs/lui/dist/scss/base.scss";
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
 
-import { Meta, StoryFn } from "@storybook/react";
-import { useCallback } from "react";
+import { Meta, StoryFn } from '@storybook/react';
+import { useCallback } from 'react';
 
-import "@linzjs/lui/dist/fonts";
-
-import { ActionButton } from "../../lui/ActionButton";
-import { wait } from "../../utils/util";
+import { ActionButton } from '../../lui/ActionButton';
+import { wait } from '../../utils/util';
 
 export default {
-  title: "Components / ActionButton",
+  title: 'Components / ActionButton',
   component: ActionButton,
   args: {},
 } as Meta<typeof ActionButton>;
@@ -20,35 +19,35 @@ const ActionButtonTemplate: StoryFn<typeof ActionButton> = () => {
   }, []);
   return (
     <>
-      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onClick={performAction} />
+      <ActionButton icon={'ic_add'} name={'Add new row'} inProgressName={'Adding...'} onClick={performAction} />
       <br />
-      <ActionButton icon={"ic_add"} aria-label={"Add new row"} onClick={performAction} level={"primary"} />
+      <ActionButton icon={'ic_add'} aria-label={'Add new row'} onClick={performAction} level={'primary'} />
       <br />
       <ActionButton
-        icon={"ic_add"}
-        aria-label={"Add new row"}
+        icon={'ic_add'}
+        aria-label={'Add new row'}
         onClick={performAction}
-        level={"primary"}
-        className={"ActionButton-tight"}
+        level={'primary'}
+        className={'ActionButton-tight'}
       />
       <br />
       <ActionButton
-        icon={"ic_arrow_forward_right"}
-        name={"Continue"}
+        icon={'ic_arrow_forward_right'}
+        name={'Continue'}
         onClick={performAction}
-        iconPosition={"right"}
-        level={"secondary"}
-        className={"ActionButton-fill"}
+        iconPosition={'right'}
+        level={'secondary'}
+        className={'ActionButton-fill'}
         style={{ maxWidth: 160 }}
       />
       <br />
       <ActionButton
-        icon={"ic_arrow_forward_right"}
-        name={"Disabled"}
+        icon={'ic_arrow_forward_right'}
+        name={'Disabled'}
         onClick={performAction}
-        iconPosition={"right"}
-        level={"secondary"}
-        className={"ActionButton-fill"}
+        iconPosition={'right'}
+        level={'secondary'}
+        className={'ActionButton-fill'}
         style={{ maxWidth: 160 }}
         disabled={true}
       />

package/src/stories/grid/FormTest.tsx

@@ -1,10 +1,9 @@
-import "./FormTest.scss";
+import './FormTest.scss';
 
-import { ReactElement, useCallback, useState } from "react";
+import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from '@linzjs/lui';
+import { ReactElement, useCallback, useState } from 'react';
 
-import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
-
-import { CellEditorCommon, FormError, useGridPopoverContext, useGridPopoverHook, wait } from "../..";
+import { CellEditorCommon, FormError, useGridPopoverContext, useGridPopoverHook, wait } from '../..';
 
 export interface IFormTestRow {
   id: number;
@@ -18,17 +17,17 @@ export interface IFormTestRow {
 
 export const FormTest = (props: CellEditorCommon): ReactElement => {
   const { value } = useGridPopoverContext<IFormTestRow>();
-  const [v1, ...v2] = value.split(" ");
+  const [v1, ...v2] = value.split(' ');
 
   const [nameType, setNameType] = useState(v1);
-  const [numba, setNumba] = useState(v2.join(" "));
+  const [numba, setNumba] = useState(v2.join(' '));
 
   const save = useCallback(
     async (selectedRows: IFormTestRow[]): Promise<boolean> => {
       // eslint-disable-next-line no-console
-      console.log("onSave", selectedRows, nameType, numba);
+      console.log('onSave', selectedRows, nameType, numba);
 
-      selectedRows.forEach((row) => (row.name = [nameType, numba].join(" ")));
+      selectedRows.forEach((row) => (row.name = [nameType, numba].join(' ')));
       await wait(1000);
 
       // Close form
@@ -38,7 +37,7 @@ export const FormTest = (props: CellEditorCommon): ReactElement => {
   );
 
   const invalid = useCallback(() => {
-    if (numba.length < 3) return "Number should be at least 3 characters";
+    if (numba.length < 3) return 'Number should be at least 3 characters';
     return null;
   }, [numba.length]);
 
@@ -79,7 +78,7 @@ export const FormTest = (props: CellEditorCommon): ReactElement => {
               level="primary"
               onClick={() => {
                 setShowModal(false);
-                triggerSave().then();
+                void triggerSave();
               }}
               data-testid="WarningAlertWithButtons-ok"
             >
@@ -88,13 +87,13 @@ export const FormTest = (props: CellEditorCommon): ReactElement => {
           </LuiAlertModalButtons>
         </LuiAlertModal>
       )}
-      <div className={"Grid-popoverContainer"}>
+      <div className={'Grid-popoverContainer'}>
         <div className="FormTest">
-          <div className={"FormTest-textInput"}>
-            <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
+          <div className={'FormTest-textInput'}>
+            <LuiTextInput label={'Name type'} value={nameType} onChange={(e) => setNameType(e.target.value)} />
           </div>
-          <div className={"FormTest-textInput"}>
-            <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
+          <div className={'FormTest-textInput'}>
+            <LuiTextInput label={'Number'} value={numba} onChange={(e) => setNumba(e.target.value)} />
           </div>
           <div style={{ marginTop: 25 }}>
             <input

package/src/stories/grid/GridDragRow.stories.tsx

@@ -1,11 +1,10 @@
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
 
-import { Meta, StoryFn } from "@storybook/react";
-import { useMemo, useState } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { Meta, StoryFn } from '@storybook/react';
+import { useMemo, useState } from 'react';
 
 import {
   ColDefT,
@@ -15,30 +14,30 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
-} from "../..";
-import { waitForGridReady } from "../../utils/storybookTestUtil";
+} from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
-  title: "Components / Grids",
+  title: 'Components / Grids',
   component: Grid,
   args: {
     quickFilter: true,
-    quickFilterValue: "",
-    quickFilterPlaceholder: "Quick filter...",
+    quickFilterValue: '',
+    quickFilterPlaceholder: 'Quick filter...',
     selectable: false,
-    rowSelection: "single",
+    rowSelection: 'single',
   },
   // Storybook hangs otherwise
   parameters: {
     docs: {
       source: {
-        type: "code",
+        type: 'code',
       },
     },
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 1024, height: 400, display: "flex", flexDirection: "column" }}>
+      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -62,29 +61,29 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "id",
-        headerName: "Id",
+        field: 'id',
+        headerName: 'Id',
         lockVisible: true,
       }),
-      GridCell<ITestRow, ITestRow["position"]>({
-        field: "position",
-        headerName: "Position",
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
         cellRendererParams: {
-          warning: ({ value }) => value === "Tester" && "Testers are testing",
-          info: ({ value }) => value === "Developer" && "Developers are awesome",
+          warning: ({ value }) => value === 'Tester' && 'Testers are testing',
+          info: ({ value }) => value === 'Developer' && 'Developers are awesome',
         },
       }),
       GridCell({
-        field: "age",
-        headerName: "Age",
+        field: 'age',
+        headerName: 'Age',
       }),
       GridCell({
-        field: "height",
-        headerName: "Height",
+        field: 'height',
+        headerName: 'Height',
       }),
       GridCell({
-        field: "desc",
-        headerName: "Description",
+        field: 'desc',
+        headerName: 'Description',
         flex: 1,
       }),
     ],
@@ -92,16 +91,16 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   );
 
   const [rowData, setRowData] = useState([
-    { id: 1000, position: "Tester", age: 30, height: `6'4"`, desc: "Tests application", dd: "1" },
-    { id: 1001, position: "Developer", age: 12, height: `5'3"`, desc: "Develops application", dd: "2" },
-    { id: 1002, position: "Manager", age: 65, height: `5'9"`, desc: "Manages", dd: "3" },
-    { id: 1003, position: "BA", age: 42, height: `5'7"`, desc: "BAs", dd: "4" },
+    { id: 1000, position: 'Tester', age: 30, height: `6'4"`, desc: 'Tests application', dd: '1' },
+    { id: 1001, position: 'Developer', age: 12, height: `5'3"`, desc: 'Develops application', dd: '2' },
+    { id: 1002, position: 'Manager', age: 65, height: `5'9"`, desc: 'Manages', dd: '3' },
+    { id: 1003, position: 'BA', age: 42, height: `5'7"`, desc: 'BAs', dd: '4' },
   ]);
 
   return (
     <GridWrapper maxHeight={300}>
       <Grid
-        data-testid={"readonly"}
+        data-testid={'readonly'}
         {...props}
         selectable={true}
         rowSelection="multiple"
@@ -109,7 +108,7 @@ const GridDragRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         columnDefs={columnDefs}
         defaultColDef={{ sortable: false }}
         rowData={rowData}
-        onRowDragEnd={async (movedRow, targetRow, _targetIndex) => {
+        onRowDragEnd={(movedRow, targetRow, _targetIndex) => {
           setRowData(
             rowData.map((r) => {
               if (r.id === movedRow.id) return targetRow;

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -1,11 +1,10 @@
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
-import "@linzjs/lui/dist/scss/base.scss";
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
 
-import { Meta, StoryFn } from "@storybook/react";
-import { useMemo, useState } from "react";
-
-import "@linzjs/lui/dist/fonts";
+import { Meta, StoryFn } from '@storybook/react';
+import { useMemo, useState } from 'react';
 
 import {
   ColDefT,
@@ -18,15 +17,15 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
-} from "../..";
-import { waitForGridReady } from "../../utils/storybookTestUtil";
+} from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
 export default {
-  title: "Components / Grids",
+  title: 'Components / Grids',
   component: Grid,
   decorators: [
     (Story) => (
-      <div style={{ width: 1024, height: 400, display: "flex" }}>
+      <div style={{ width: 1024, height: 400, display: 'flex' }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -47,16 +46,16 @@ const GridFilterButtonsTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
-        field: "id",
-        headerName: "Id",
+        field: 'id',
+        headerName: 'Id',
       }),
       GridCell({
-        field: "position",
-        headerName: "Position",
+        field: 'position',
+        headerName: 'Position',
       }),
       GridCell({
-        field: "desc",
-        headerName: "Description",
+        field: 'desc',
+        headerName: 'Description',
         flex: 1,
       }),
     ],
@@ -66,40 +65,40 @@ const GridFilterButtonsTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [rowData] = useState([
     {
       id: 1000,
-      position: "Tester",
+      position: 'Tester',
       age: 30,
-      desc: "Integration tester - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lectus neque. Nunc congue magna ut lorem pretium, vitae congue lorem malesuada. Etiam eget eleifend sapien, sed egestas felis. Aliquam ac augue sapien.",
+      desc: 'Integration tester - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lectus neque. Nunc congue magna ut lorem pretium, vitae congue lorem malesuada. Etiam eget eleifend sapien, sed egestas felis. Aliquam ac augue sapien.',
     },
-    { id: 1001, position: "Developer", age: 12, desc: "Frontend developer" },
-    { id: 1002, position: "Manager", age: 65, desc: "Technical Manager" },
-    { id: 1003, position: "Tester", age: 30, desc: "E2E tester" },
-    { id: 1004, position: "Developer", age: 12, desc: "Fullstack Developer" },
-    { id: 1005, position: "Developer", age: 12, desc: "Backend Developer" },
-    { id: 1006, position: "Architect", age: 30, desc: "Architect" },
+    { id: 1001, position: 'Developer', age: 12, desc: 'Frontend developer' },
+    { id: 1002, position: 'Manager', age: 65, desc: 'Technical Manager' },
+    { id: 1003, position: 'Tester', age: 30, desc: 'E2E tester' },
+    { id: 1004, position: 'Developer', age: 12, desc: 'Fullstack Developer' },
+    { id: 1005, position: 'Developer', age: 12, desc: 'Backend Developer' },
+    { id: 1006, position: 'Architect', age: 30, desc: 'Architect' },
   ]);
 
   return (
     <GridWrapper>
       <GridFilters>
-        <GridFilterQuick quickFilterPlaceholder={"Custom placeholder..."} />
+        <GridFilterQuick quickFilterPlaceholder={'Custom placeholder...'} />
         <GridFilterButtons<ITestRow>
-          luiButtonProps={{ style: { whiteSpace: "nowrap" } }}
+          luiButtonProps={{ style: { whiteSpace: 'nowrap' } }}
           options={[
             {
-              label: "All",
+              label: 'All',
             },
             {
-              label: "Developers",
-              filter: (row) => row.position === "Developer",
+              label: 'Developers',
+              filter: (row) => row.position === 'Developer',
             },
             {
-              label: "Testers",
-              filter: (row) => row.position === "Tester",
+              label: 'Testers',
+              filter: (row) => row.position === 'Tester',
             },
           ]}
         />
       </GridFilters>
-      <Grid {...props} columnDefs={columnDefs} rowData={rowData} sizeColumns={"auto-skip-headers"} />
+      <Grid {...props} columnDefs={columnDefs} rowData={rowData} sizeColumns={'auto-skip-headers'} />
     </GridWrapper>
   );
 };