OnColumnResize DataGrid

CHANGELOG.md

@@ -3,7 +3,8 @@
 - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043))
 - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039))
 - Removed `role` attribute from `EuiImage`([#3036](https://github.com/elastic/eui/pull/3036))
--  Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003))
+- Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003))
+- Added `onColumnResize` prop to `EuiDataGrid` of type `EuiDataGridOnColumnResizeHandler` that gets called when column changes it's size ([#2963](https://github.com/elastic/eui/pull/2963))
 
 **Bug Fixes**
 

src-docs/src/views/datagrid/datagrid.js

@@ -219,6 +219,9 @@ export default () => {
         onChangeItemsPerPage: onChangeItemsPerPage,
         onChangePage: onChangePage,
       }}
+      onColumnResize={eventData => {
+        console.log(eventData);
+      }}
     />
   );
 };

src/components/datagrid/data_grid.test.tsx

@@ -1245,6 +1245,36 @@ Array [
         });
       });
 
+      it('should listen for column resize', () => {
+        const onColumnResizeCallback = jest.fn();
+        const component = mount(
+          <EuiDataGrid
+            aria-labelledby="#test"
+            columns={[{ id: 'Column 1' }, { id: 'Column 2', initialWidth: 75 }]}
+            columnVisibility={{
+              visibleColumns: ['Column 1', 'Column 2'],
+              setVisibleColumns: () => {},
+            }}
+            rowCount={3}
+            renderCellValue={() => 'value'}
+            onColumnResize={args => onColumnResizeCallback(args)}
+          />
+        );
+
+        resizeColumn(component, 'Column 1', 150);
+        resizeColumn(component, 'Column 2', 100);
+
+        expect(onColumnResizeCallback.mock.calls.length).toBe(2);
+        expect(onColumnResizeCallback.mock.calls[0][0]).toEqual({
+          columnId: 'Column 1',
+          width: 150,
+        });
+        expect(onColumnResizeCallback.mock.calls[1][0]).toEqual({
+          columnId: 'Column 2',
+          width: 100,
+        });
+      });
+
       it('is prevented by isResizable:false', () => {
         const component = mount(
           <EuiDataGrid

src/components/datagrid/data_grid.tsx

@@ -35,6 +35,7 @@ import {
   EuiDataGridColumnVisibility,
   EuiDataGridToolBarVisibilityOptions,
   EuiDataGridFocusedCell,
+  EuiDataGridOnColumnResizeHandler,
 } from './data_grid_types';
 import { EuiDataGridCellProps } from './data_grid_cell';
 import { EuiButtonEmpty } from '../button';
@@ -115,6 +116,10 @@ type CommonGridProps = CommonProps &
      * A #EuiDataGridSorting oject that provides the sorted columns along with their direction. Omit to disable, but you'll likely want to also turn off the user sorting controls through the `toolbarVisibility` prop.
      */
     sorting?: EuiDataGridSorting;
+    /**
+     * A callback for when a column's size changes. Callback receives `{ columnId: string, width: number }`.
+     */
+    onColumnResize?: EuiDataGridOnColumnResizeHandler;
   };
 
 // This structure forces either aria-label or aria-labelledby to be defined
@@ -270,7 +275,8 @@ function doesColumnHaveAnInitialWidth(
 }
 
 function useColumnWidths(
-  columns: EuiDataGridColumn[]
+  columns: EuiDataGridColumn[],
+  onColumnResize?: EuiDataGridOnColumnResizeHandler
 ): [EuiDataGridColumnWidths, (columnId: string, width: number) => void] {
   const [columnWidths, setColumnWidths] = useState<EuiDataGridColumnWidths>({});
 
@@ -289,6 +295,10 @@ function useColumnWidths(
 
   const setColumnWidth = (columnId: string, width: number) => {
     setColumnWidths({ ...columnWidths, [columnId]: width });
+
+    if (onColumnResize) {
+      onColumnResize({ columnId, width });
+    }
   };
 
   return [columnWidths, setColumnWidth];
@@ -570,10 +580,14 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
     sorting,
     inMemory,
     popoverContents,
+    onColumnResize,
     ...rest
   } = props;
 
-  const [columnWidths, setColumnWidth] = useColumnWidths(columns);
+  const [columnWidths, setColumnWidth] = useColumnWidths(
+    columns,
+    onColumnResize
+  );
 
   // apply style props on top of defaults
   const gridStyleWithDefaults = { ...startingStyles, ...gridStyle };

src/components/datagrid/data_grid_types.ts

@@ -204,3 +204,12 @@ export type EuiDataGridPopoverContent = ComponentType<
 export interface EuiDataGridPopoverContents {
   [key: string]: EuiDataGridPopoverContent;
 }
+
+export interface EuiDataGridOnColumnResizeData {
+  columnId: string;
+  width: number;
+}
+
+export type EuiDataGridOnColumnResizeHandler = (
+  data: EuiDataGridOnColumnResizeData
+) => void;