Fix Dom-Reconciliation w/ Headers

src/components/Headers/Headers.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from 'react-testing-library';
+import { ColumnProps, HeaderRendererArgs } from '../../types';
+import Headers from './Headers';
+
+describe('<Headers />', () => {
+  test('rendering column header renderers properly', () => {
+    function renderHeader(props: HeaderRendererArgs) {
+      return <div>{props.label}</div>;
+    }
+
+    const columns: ColumnProps[] = [
+      {
+        headerRenderer: renderHeader,
+        dataKey: 'fooKey',
+        label: 'fooLabel',
+        width: 42,
+      },
+      {
+        headerRenderer: renderHeader,
+        dataKey: 'barKey',
+        label: 'barLabel',
+        width: 42,
+      },
+    ];
+    const headerHeight = 42;
+
+    const { container } = render(
+      <Headers columns={columns} headerHeight={headerHeight} />,
+    );
+
+    expect(container.textContent).toMatch('fooLabel');
+    expect(container.textContent).toMatch('barLabel');
+  });
+});

src/components/Headers/Headers.tsx

@@ -2,18 +2,28 @@ import React from 'react';
 import { ColumnProps } from '../../types';
 
 export type Props = {
-  headerHeight: number;
   columns: ColumnProps[];
+  headerHeight: number;
 };
 
-export default function({ headerHeight, columns }: Props) {
+export default function Headers({ headerHeight, columns }: Props) {
   return (
     <div style={{ display: 'flex', height: headerHeight }}>
-      {columns.map((column, index) => (
-        <div key={index} style={{ width: column.width }}>
-          {(column.headerRenderer && column.headerRenderer(column)) || <div />}
-        </div>
-      ))}
+      {columns.map(renderColumn)}
+    </div>
+  );
+}
+
+function renderColumn(column: ColumnProps, index: number) {
+  const Header = column.headerRenderer || FallbackHeader;
+
+  return (
+    <div key={index} style={{ width: column.width }}>
+      <Header {...column} />
     </div>
   );
 }
+
+function FallbackHeader() {
+  return <div />;
+}

src/types.ts

@@ -77,9 +77,9 @@ export type CellRenderer<ColumnData = any> =
 
 export type ColumnProps<ColumnData = any> = {
   cellRenderer?: CellRenderer<ColumnData>;
-  headerRenderer?: (arg: HeaderRendererArgs) => React.ReactNode;
-  width: number;
   columnData?: any;
   dataKey: string;
+  headerRenderer?: (arg: HeaderRendererArgs) => React.ReactElement;
   label: any;
+  width: number;
 };