@arbor-education/design-system.components 1.0.0 → 1.0.2

package/src/components/table/Table.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import {
   Controls,
   Heading as DocHeading,
@@ -503,7 +503,7 @@ const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'marks',
     cellDataType: 'number',
-    cellEditor: 'dsNumberCellEditor',
+    type: 'dsNumberColumn',
     cellEditorParams: {
       min: 0,
       max: 100,
@@ -1042,11 +1042,7 @@ const sampleColumnDefsWithButtonCellRenderer: (ColDef | ColGroupDef)[] = [
       {
         field: 'name',
         headerTooltip: 'The name of the user',
-        cellRenderer: 'dsButtonCellRenderer',
-        cellRendererParams: {
-          suppressCellFocusAndFocusFirstElement: true,
-        },
-        editable: false,
+        type: 'dsButtonColumn',
       },
       {
         field: 'email',
@@ -1370,13 +1366,7 @@ export const WithInlineTextCellRenderer: Story = {
     columnDefs: [
       {
         field: 'name',
-        cellRenderer: 'dsInlineTextCellRenderer',
-        cellRendererParams: {
-          suppressCellFocusAndFocusFirstElement: true,
-          suppressCount: true,
-          suppressDoubleClickExpand: true,
-          suppressEnterExpand: true,
-        },
+        type: 'dsInlineTextColumn',
       },
     ],
     defaultColDef,
@@ -1572,7 +1562,7 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Assessment Component',
     field: 'assessmentComponent',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: (params: CustomCellRendererProps) => {
       return {
         options: assessmentComponentOptions,
@@ -1580,16 +1570,12 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
         hasError: params.node.data.assessmentComponent === 'comp-maths',
       };
     },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     headerName: 'Visibility',
     field: 'visibility',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: visibilityOptions, placeholder: 'Select' },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     headerName: 'Editable',
@@ -1973,29 +1959,17 @@ const dateEditorColDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'dateOfBirth',
     headerName: 'Date of Birth',
-    cellEditor: 'dsDateCellEditor',
-    valueFormatter: params =>
-      params.value instanceof Date
-        ? params.value.toLocaleDateString('en-GB')
-        : params.value ?? '',
+    type: 'dsDateColumn',
   },
   {
     field: 'enrollmentDate',
     headerName: 'Enrollment Date',
-    cellEditor: 'dsDateCellEditor',
-    valueFormatter: params =>
-      params.value instanceof Date
-        ? params.value.toLocaleDateString('en-GB')
-        : params.value ?? '',
+    type: 'dsDateColumn',
   },
   {
     field: 'graduationDate',
     headerName: 'Graduation Date',
-    cellEditor: 'dsDateCellEditor',
-    valueFormatter: params =>
-      params.value instanceof Date
-        ? params.value.toLocaleDateString('en-GB')
-        : params.value ?? '',
+    type: 'dsDateColumn',
   },
 ];
 
@@ -2039,14 +2013,12 @@ const booleanCellRendererColumnDefs: ColDef<BooleanRowData>[] = [
   {
     field: 'hasPet',
     headerName: 'Has Pet',
-    cellRenderer: 'dsBooleanCellRenderer',
-    editable: false,
+    type: 'dsBooleanColumn',
   },
   {
     field: 'isEnrolled',
     headerName: 'Is Enrolled',
-    cellRenderer: 'dsBooleanCellRenderer',
-    editable: false,
+    type: 'dsBooleanColumn',
   },
 ];
 
@@ -2129,20 +2101,12 @@ const checkboxColumnDefs: ColDef[] = [
   {
     field: 'attended',
     headerName: 'Attended',
-    cellRenderer: 'dsCheckboxCellRenderer',
-    cellRendererParams: {
-      suppressCellFocusAndFocusFirstElement: true,
-    },
-    editable: false,
+    type: 'dsCheckboxColumn',
   },
   {
     field: 'consented',
     headerName: 'Consented',
-    cellRenderer: 'dsCheckboxCellRenderer',
-    cellRendererParams: {
-      suppressCellFocusAndFocusFirstElement: true,
-    },
-    editable: false,
+    type: 'dsCheckboxColumn',
   },
 ];
 
@@ -2273,23 +2237,20 @@ const selectDropdownColDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'status',
     headerName: 'Status',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: { options: statusOptions, placeholder: 'Select status' },
-    editable: false,
   },
   {
     field: 'priority',
     headerName: 'Priority',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: { options: priorityOptions, placeholder: 'Select priority' },
-    editable: false,
   },
   {
     field: 'category',
     headerName: 'Category',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: { options: categoryOptions, placeholder: 'Select category' },
-    editable: false,
   },
 ];
 
@@ -2361,34 +2322,26 @@ const comboboxColDefs: (ColDef | ColGroupDef)[] = [
   {
     field: 'subject',
     headerName: 'Subject (single, input)',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: subjectOptions, placeholder: 'Select subject' },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     field: 'level',
     headerName: 'Level (single, button)',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: levelOptions, placeholder: 'Select level', triggerVariant: 'button' },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     field: 'tags',
     headerName: 'Tags (multi, button)',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: tagOptions, placeholder: 'Select tags', multiple: true, triggerVariant: 'button' },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     field: 'skills',
     headerName: 'Skills (multi, input)',
-    cellRenderer: 'dsComboboxCellRenderer',
+    type: 'dsComboboxColumn',
     cellRendererParams: { options: skillOptions, placeholder: 'Select skills', multiple: true },
-    editable: false,
-    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
 ];
 
@@ -2422,17 +2375,15 @@ const numberInputColDefs: (ColDef | ColGroupDef)[] = [
     field: 'sessions',
     headerName: 'Sessions',
     flex: 1,
-    editable: false,
-    cellRenderer: 'dsNumberInputCellRenderer',
-    cellRendererParams: { min: 0, suppressCellFocusAndFocusFirstElement: true },
+    type: 'dsNumberInputColumn',
+    cellRendererParams: { min: 0 },
   },
   {
     field: 'score',
     headerName: 'Score (/100)',
     flex: 1,
-    editable: false,
-    cellRenderer: 'dsNumberInputCellRenderer',
-    cellRendererParams: { min: 0, max: 100, suppressCellFocusAndFocusFirstElement: true },
+    type: 'dsNumberInputColumn',
+    cellRendererParams: { min: 0, max: 100 },
   },
 ];
 

package/src/components/table/Table.tsx

@@ -36,6 +36,7 @@ import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer.js';
 import { ComboboxCellRenderer } from './cellRenderers/ComboboxCellRenderer.js';
 import { DefaultCellRenderer } from './cellRenderers/DefaultCellRenderer.js';
 import { NumberInputCellRenderer } from './cellRenderers/NumberInputCellRenderer.js';
+import { columnTypes } from './columnTypes.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -214,6 +215,7 @@ export const Table = (props: TableProps) => {
               dsNumberInputCellRenderer: NumberInputCellRenderer,
               ...components,
             }}
+            columnTypes={columnTypes}
             {...rest}
             {...(hasSearch && { quickFilterText: searchValue })}
           />

package/src/components/table/cellEditors/DateCellEditor.stories.tsx

@@ -21,7 +21,9 @@ const DESCRIPTION_INTRO = [
   '`DateCellEditor` is an AG Grid cell editor component that renders an Arbor `DatePicker` inside a table cell.',
   'It is invoked when a user begins editing a date column (e.g. by pressing Enter or double-clicking the cell).',
   '',
-  'Register it via the AG Grid `cellEditor` column definition property.',
+  'Register it via `type: \'dsDateColumn\'` on the column definition (pre-registered by Arbor\'s `Table`,',
+  'and also applies a `valueFormatter` that renders `Date` values as `en-GB` strings), or via the AG Grid',
+  '`cellEditor` column definition property directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -35,12 +37,22 @@ const USAGE_GUIDANCE = [
   '### Registration',
   '',
   '```tsx',
+  'const colDefs = [',
+  '  {',
+  "    field: 'dob',",
+  "    headerName: 'Date of birth',",
+  "    type: 'dsDateColumn', // preferred — pre-registered on Arbor's Table",
+  '  },',
+  '];',
+  '',
+  '// or register the editor directly:',
   "import { DateCellEditor } from '@arbor-education/design-system.components';",
   '',
   'const colDefs = [',
   '  {',
   "    field: 'dob',",
   "    headerName: 'Date of birth',",
+  '    editable: true,',
   '    cellEditor: DateCellEditor,',
   '    // or via string key:',
   "    cellEditor: 'dsDateCellEditor',",
@@ -200,12 +212,7 @@ function DateCellEditorExample() {
           field: 'dateOfBirth',
           headerName: 'Date of birth',
           flex: 1,
-          editable: true,
-          cellEditor: 'dsDateCellEditor',
-          valueFormatter: (params) =>
-            params.value instanceof Date
-              ? params.value.toLocaleDateString('en-GB')
-              : params.value,
+          type: 'dsDateColumn',
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -228,12 +235,7 @@ export default DateCellEditorExample;
             field: 'dateOfBirth',
             headerName: 'Date of birth',
             flex: 1,
-            editable: true,
-            cellEditor: 'dsDateCellEditor',
-            valueFormatter: params =>
-              params.value instanceof Date
-                ? params.value.toLocaleDateString('en-GB')
-                : params.value,
+            type: 'dsDateColumn',
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -241,5 +243,5 @@ export default DateCellEditorExample;
       />
     ),
   },
-  '`dsDateCellEditor` wired up inside a full `Table`. Double-click (or press F2/Enter) on a Date of birth cell to open the `DatePicker` editor — AG Grid mounts the editor component and passes the current cell value as `value`. The `valueFormatter` formats the stored `Date` object as a localised string for display.',
+  '`type: \'dsDateColumn\'` wired up inside a full `Table`. Double-click (or press F2/Enter) on a Date of birth cell to open the `DatePicker` editor — AG Grid mounts the editor component and passes the current cell value as `value`. The column type\'s `valueFormatter` formats the stored `Date` object as a localised string for display.',
 );

package/src/components/table/cellRenderers/BooleanCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   'A `true` value renders a green check icon; a `false` value renders a red ✕ icon;',
   'any other value (including `null` and `undefined`) renders nothing.',
   '',
-  'Register it via the string key `dsBooleanCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsBooleanColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsBooleanCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -55,7 +56,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    field: 'isActive',",
   "    headerName: 'Active',",
-  "    cellRenderer: 'dsBooleanCellRenderer',  // string key — no import needed",
+  "    type: 'dsBooleanColumn',  // pre-registered column type — no import needed",
   '  },',
   '];',
   '```',
@@ -241,8 +242,7 @@ function BooleanCellRendererExample() {
           field: 'active',
           headerName: 'Active',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsBooleanCellRenderer',
+          type: 'dsBooleanColumn',
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -265,8 +265,7 @@ export default BooleanCellRendererExample;
             field: 'active',
             headerName: 'Active',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsBooleanCellRenderer',
+            type: 'dsBooleanColumn',
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -274,5 +273,5 @@ export default BooleanCellRendererExample;
       />
     ),
   },
-  '`dsBooleanCellRenderer` wired up inside a full `Table`. `true` renders a check, `false` renders a ✕, and `null` leaves the cell empty. The Active column is set to `editable: false` — this renderer is display-only.',
+  '`type: \'dsBooleanColumn\'` wired up inside a full `Table`. `true` renders a check, `false` renders a ✕, and `null` leaves the cell empty. The column type sets `editable: false` — this renderer is display-only.',
 );

package/src/components/table/cellRenderers/ButtonCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   'The cell `value` (or `valueFormatted`) must be a `ButtonProps` object — the renderer spreads it',
   'directly onto `Button`, so all button variants, sizes, and handlers are supported.',
   '',
-  'Register it via the string key `dsButtonCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsButtonColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsButtonCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -56,7 +57,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    colId: 'viewAction',",
   "    headerName: '',",
-  "    cellRenderer: 'dsButtonCellRenderer',",
+  "    type: 'dsButtonColumn',",
   '    valueGetter: (params) => ({',
   "      children: 'View',",
   "      variant: 'secondary',",
@@ -199,7 +200,7 @@ const colDefs = [
   {
     colId: 'action',
     headerName: '',
-    cellRenderer: 'dsButtonCellRenderer',
+    type: 'dsButtonColumn',
     valueGetter: (params) => ({
       children: 'Enrol',
       variant: 'primary',
@@ -282,8 +283,7 @@ function ButtonCellRendererExample() {
           headerName: '',
           flex: 1,
           maxWidth: 180,
-          editable: false,
-          cellRenderer: 'dsButtonCellRenderer',
+          type: 'dsButtonColumn',
           valueGetter: (params) => ({
             children: 'View details',
             variant: 'secondary',
@@ -314,8 +314,7 @@ export default ButtonCellRendererExample;
             headerName: '',
             flex: 1,
             maxWidth: 180,
-            editable: false,
-            cellRenderer: 'dsButtonCellRenderer',
+            type: 'dsButtonColumn',
             valueGetter: params => ({
               children: 'View details',
               variant: 'secondary',
@@ -329,5 +328,5 @@ export default ButtonCellRendererExample;
       />
     ),
   },
-  '`dsButtonCellRenderer` wired up inside a full `Table`. The action column uses `valueGetter` to return a `ButtonProps` object per row — `onClick` closes over `params.data` so each button knows its row. Click a button and check the browser console.',
+  '`type: \'dsButtonColumn\'` wired up inside a full `Table`. The action column uses `valueGetter` to return a `ButtonProps` object per row — `onClick` closes over `params.data` so each button knows its row. Click a button and check the browser console.',
 );

package/src/components/table/cellRenderers/CheckboxCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   '`CheckboxCellRenderer` is an AG Grid cell renderer that renders an editable Arbor `CheckboxInput`',
   'inside a table cell. On toggle, it calls `node.setDataValue` to update the row data in-place.',
   '',
-  'Register it via the string key `dsCheckboxCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsCheckboxColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsCheckboxCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -61,7 +62,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    field: 'isEnrolled',",
   "    headerName: 'Enrolled',",
-  "    cellRenderer: 'dsCheckboxCellRenderer',",
+  "    type: 'dsCheckboxColumn',",
   '    // optional extra CheckboxInput props:',
   '    cellRendererParams: { disabled: isReadOnly },',
   '  },',
@@ -230,7 +231,7 @@ const colDefs = [
   {
     field: 'isEnrolled',
     headerName: 'Enrolled',
-    cellRenderer: 'dsCheckboxCellRenderer',
+    type: 'dsCheckboxColumn',
   },
 ];
 `.trim(),
@@ -300,8 +301,7 @@ function CheckboxCellRendererExample() {
           field: 'enrolled',
           headerName: 'Enrolled',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsCheckboxCellRenderer',
+          type: 'dsCheckboxColumn',
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -324,8 +324,7 @@ export default CheckboxCellRendererExample;
             field: 'enrolled',
             headerName: 'Enrolled',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsCheckboxCellRenderer',
+            type: 'dsCheckboxColumn',
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -333,5 +332,5 @@ export default CheckboxCellRendererExample;
       />
     ),
   },
-  '`dsCheckboxCellRenderer` wired up inside a full `Table`. Click a checkbox to toggle the value — AG Grid calls `node.setDataValue` which updates the row data in-place. The `headerName` ("Enrolled") becomes the checkbox `aria-label`.',
+  '`type: \'dsCheckboxColumn\'` wired up inside a full `Table`. Click a checkbox to toggle the value — AG Grid calls `node.setDataValue` which updates the row data in-place. The `headerName` ("Enrolled") becomes the checkbox `aria-label`.',
 );

package/src/components/table/cellRenderers/InlineTextCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   'inside a table cell for inline text editing. Pressing Enter commits the current value via',
   '`node.setDataValue`. The input is pre-populated from `valueFormatted ?? value`.',
   '',
-  'Register it via the string key `dsInlineTextCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsInlineTextColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsInlineTextCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -60,7 +61,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    field: 'forename',",
   "    headerName: 'First name',",
-  "    cellRenderer: 'dsInlineTextCellRenderer',",
+  "    type: 'dsInlineTextColumn',",
   '  },',
   '];',
   '```',
@@ -206,7 +207,7 @@ const colDefs = [
   {
     field: 'forename',
     headerName: 'First name',
-    cellRenderer: 'dsInlineTextCellRenderer',
+    type: 'dsInlineTextColumn',
   },
 ];
 `.trim(),
@@ -255,8 +256,7 @@ function InlineTextCellRendererExample() {
           field: 'forename',
           headerName: 'First Name',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsInlineTextCellRenderer',
+          type: 'dsInlineTextColumn',
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -279,8 +279,7 @@ export default InlineTextCellRendererExample;
             field: 'forename',
             headerName: 'First Name',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsInlineTextCellRenderer',
+            type: 'dsInlineTextColumn',
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -288,5 +287,5 @@ export default InlineTextCellRendererExample;
       />
     ),
   },
-  '`dsInlineTextCellRenderer` wired up inside a full `Table`. Click into any First Name cell to start editing — the `TextInput` is always visible. Press Enter to commit the value via `node.setDataValue`, updating the row data in-place.',
+  '`type: \'dsInlineTextColumn\'` wired up inside a full `Table`. Click into any First Name cell to start editing — the `TextInput` is always visible. Press Enter to commit the value via `node.setDataValue`, updating the row data in-place.',
 );

package/src/components/table/cellRenderers/NumberInputCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   '`NumberInputCellRenderer` is an AG Grid cell renderer that renders an editable Arbor `NumberInput`',
   'permanently inside a table cell. On change, it calls `node.setDataValue` to update the row data in-place.',
   '',
-  'Register it via the string key `dsNumberInputCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsNumberInputColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsNumberInputCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -61,7 +62,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    field: 'quantity',",
   "    headerName: 'Quantity',",
-  "    cellRenderer: 'dsNumberInputCellRenderer',",
+  "    type: 'dsNumberInputColumn',",
   '    cellRendererParams: { min: 0, max: 100 },',
   '  },',
   '];',
@@ -293,17 +294,15 @@ function NumberInputCellRendererExample() {
           field: 'sessions',
           headerName: 'Sessions',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsNumberInputCellRenderer',
-          cellRendererParams: { min: 0, suppressCellFocusAndFocusFirstElement: true },
+          type: 'dsNumberInputColumn',
+          cellRendererParams: { min: 0 },
         },
         {
           field: 'score',
           headerName: 'Score (/100)',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsNumberInputCellRenderer',
-          cellRendererParams: { min: 0, max: 100, suppressCellFocusAndFocusFirstElement: true },
+          type: 'dsNumberInputColumn',
+          cellRendererParams: { min: 0, max: 100 },
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -324,17 +323,15 @@ function NumberInputCellRendererExample() {
             field: 'sessions',
             headerName: 'Sessions',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsNumberInputCellRenderer',
-            cellRendererParams: { min: 0, suppressCellFocusAndFocusFirstElement: true },
+            type: 'dsNumberInputColumn',
+            cellRendererParams: { min: 0 },
           },
           {
             field: 'score',
             headerName: 'Score (/100)',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsNumberInputCellRenderer',
-            cellRendererParams: { min: 0, max: 100, suppressCellFocusAndFocusFirstElement: true },
+            type: 'dsNumberInputColumn',
+            cellRendererParams: { min: 0, max: 100 },
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -342,5 +339,5 @@ function NumberInputCellRendererExample() {
       />
     ),
   },
-  '`dsNumberInputCellRenderer` wired up inside a full `Table`. Sessions has `min={0}`; Score has `min={0}` and `max={100}`. Edit any cell — AG Grid calls `node.setDataValue` which updates the row data in-place.',
+  '`type: \'dsNumberInputColumn\'` wired up inside a full `Table`. Sessions has `min={0}`; Score has `min={0}` and `max={100}`. Edit any cell — AG Grid calls `node.setDataValue` which updates the row data in-place.',
 );