diff --git a/webapp/channels/src/components/admin_console/data_grid/data_grid_header.tsx b/webapp/channels/src/components/admin_console/data_grid/data_grid_header.tsx
index 690c4f20ff..92a7ff99e9 100644
--- a/webapp/channels/src/components/admin_console/data_grid/data_grid_header.tsx
+++ b/webapp/channels/src/components/admin_console/data_grid/data_grid_header.tsx
@@ -8,35 +8,41 @@ import type {Column} from './data_grid';
 
 import './data_grid.scss';
 
+type HeaderElementProps = {
+    col: Column;
+}
+
+const HeaderElement = ({col}: HeaderElementProps) => {
+    const style: CSSProperties = {};
+    if (col.width) {
+        style.flexGrow = col.width;
+    }
+    return (
+        <div
+            key={col.field}
+            className='DataGrid_cell'
+            style={style}
+        >
+            {col.name}
+        </div>
+    );
+};
+
 export type Props = {
     columns: Column[];
 }
 
-class DataGridHeader extends React.Component<Props> {
-    renderHeaderElement(col: Column) {
-        const style: CSSProperties = {};
-        if (col.width) {
-            style.flexGrow = col.width;
-        }
-
-        return (
-            <div
-                key={col.field}
-                className='DataGrid_cell'
-                style={style}
-            >
-                {col.name}
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div className='DataGrid_header'>
-                {this.props.columns.map((col) => this.renderHeaderElement(col))}
-            </div>
-        );
-    }
-}
+const DataGridHeader = ({columns}: Props) => {
+    return (
+        <div className='DataGrid_header'>
+            {columns.map((col) => (
+                <HeaderElement
+                    col={col}
+                    key={col.field}
+                />
+            ))}
+        </div>
+    );
+};
 
 export default DataGridHeader;