refactor: convert DataGridHeader into function component (#24747)

* refactor: convert DataGridHeader into function component

* fix: core review

* split into 2 components

* add key for maped items

* lint firx

* fix missing parentheses

* fix bracket

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/data_grid/data_grid_header.tsx

@@ -8,17 +8,15 @@ import type {Column} from './data_grid';
 
 import './data_grid.scss';
 
-export type Props = {
+type HeaderElementProps = {
-    columns: Column[];
+    col: Column;
 }
 
-class DataGridHeader extends React.Component<Props> {
+const HeaderElement = ({col}: HeaderElementProps) => {
-    renderHeaderElement(col: Column) {
     const style: CSSProperties = {};
     if (col.width) {
         style.flexGrow = col.width;
     }
-
     return (
         <div
             key={col.field}
@@ -28,15 +26,23 @@ class DataGridHeader extends React.Component<Props> {
             {col.name}
         </div>
     );
+};
+
+export type Props = {
+    columns: Column[];
 }
 
-    render() {
+const DataGridHeader = ({columns}: Props) => {
     return (
         <div className='DataGrid_header'>
-                {this.props.columns.map((col) => this.renderHeaderElement(col))}
+            {columns.map((col) => (
+                <HeaderElement
+                    col={col}
+                    key={col.field}
+                />
+            ))}
         </div>
     );
-    }
+};
-}
 
 export default DataGridHeader;