Add optional render function for headers

README.md

@@ -64,6 +64,29 @@ const {
 });
 ```
 
+### `useTable` Arguments
+
+#### `columns`
+
+The first argument is an array of columns of type ColumnType. Each column has the following signature:
+
+```typescript
+type ColumnType<T> = {
+  name: string;
+  label?: string;
+  hidden?: boolean;
+  sort?: ((a: RowType<T>, b: RowType<T>) => number) | undefined;
+  render?: ({ value, row }: { value: any; row: T }) => React.ReactNode;
+  headerRender?: HeaderRenderType;
+};
+```
+
+Only name is required, the rest are optional arguments.
+
+#### `rows`
+
+Rows is the second argument to useTable and can be an array of any _object_ type.
+
 ### Basic example
 
 ```tsx

examples/material-ui/src/App.tsx

@@ -45,7 +45,9 @@ const columns = [
   },
 ];
 
-const data = [
+type DataType = { first_name: string, last_name: string, date_born: string };
+
+const data: DataType[] = [
   {
     first_name: 'Frodo',
     last_name: 'Baggins',
@@ -69,10 +71,10 @@ function App() {
     originalRows,
     toggleSort,
     toggleAll,
-  } = useTable(columns, data, {
+  } = useTable<DataType>(columns, data, {
     selectable: true,
     filter: useCallback(
-      (rows: RowType[]) => {
+      (rows: RowType<DataType>[]) => {
         return rows.filter(row => {
           return (
             row.cells.filter(cell => {
@@ -107,7 +109,7 @@ function App() {
                 </TableCell>
                 {headers.map(column => (
                   <TableCell onClick={() => toggleSort(column.name)}>
-                    {column.label}{' '}
+                    {column.render()}{' '}
                     {column.sorted.on ? (
                       <>
                         {column.sorted.asc ? (

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.1",
+  "version": "1.1.0",
   "license": "MIT",
   "author": "Gabriel Abud",
   "main": "dist/index.js",
@@ -52,10 +52,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/Buuntu/react-final-table.git"
+    "url": "https://github.com/Buuntu/react-final-table"
   },
   "bugs": {
-    "url": "https://github.com/Buuntu/react-final-table"
+    "url": "https://github.com/Buuntu/react-final-table/issues"
   },
   "homepage": "https://github.com/Buuntu/react-final-table#readme"
-}
+}

src/hooks.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useReducer, useEffect } from 'react';
+import { useMemo, useReducer, useEffect, ReactNode } from 'react';
 
 import {
   ColumnByNamesType,
@@ -9,7 +9,9 @@ import {
   UseTableReturnType,
   UseTableOptionsType,
   RowType,
-  ColumnByNameType,
+  HeaderType,
+  HeaderRenderType,
+  ColumnStateType,
 } from './types';
 import { byTextAscending, byTextDescending } from './utils';
 
@@ -173,11 +175,14 @@ export const useTable = <T extends DataType>(
   data: T[],
   options?: UseTableOptionsType<T>
 ): UseTableReturnType<T> => {
-  const columnsWithSorting = useMemo(
+  const columnsWithSorting: ColumnStateType<T>[] = useMemo(
     () =>
       columns.map(column => {
         return {
           ...column,
+          label: column.label ? column.label : column.name,
+          hidden: column.hidden ? column.hidden : false,
+          sort: column.sort,
           sorted: {
             on: false,
             asc: true,
@@ -187,10 +192,10 @@ export const useTable = <T extends DataType>(
     [columns]
   );
   const columnsByName = useMemo(() => getColumnsByName(columnsWithSorting), [
-    columns,
+    columnsWithSorting,
   ]);
 
-  const tableData = useMemo(() => {
+  const tableData: RowType<T>[] = useMemo(() => {
     const sortedData = sortDataInOrder(data, columnsWithSorting);
 
     const newData = sortedData.map((row, idx) => {
@@ -205,7 +210,7 @@ export const useTable = <T extends DataType>(
               hidden: columnsByName[column].hidden,
               field: column,
               value: value,
-              render: makeRender(value, columnsByName[column], row),
+              render: makeRender(value, columnsByName[column].render, row),
             };
           })
           .filter(cell => !cell.hidden),
@@ -225,6 +230,18 @@ export const useTable = <T extends DataType>(
     filterOn: false,
   });
 
+  const headers: HeaderType<T>[] = useMemo(() => {
+    return [
+      ...state.columns.map(column => {
+        const label = column.label ? column.label : column.name;
+        return {
+          ...column,
+          render: makeHeaderRender(label, column.headerRender),
+        };
+      }),
+    ];
+  }, [state.columns]);
+
   useEffect(() => {
     if (options && options.filter) {
       dispatch({ type: 'GLOBAL_FILTER', filter: options.filter });
@@ -234,7 +251,7 @@ export const useTable = <T extends DataType>(
   }, [options?.filter]);
 
   return {
-    headers: state.columns.filter(column => !column.hidden),
+    headers: headers.filter(column => !column.hidden),
     rows: state.rows,
     originalRows: state.originalRows,
     selectedRows: state.selectedRows,
@@ -248,10 +265,17 @@ export const useTable = <T extends DataType>(
 
 const makeRender = <T extends DataType>(
   value: any,
-  column: ColumnByNameType<T>,
+  render: (({ value, row }: { value: any; row: T }) => ReactNode) | undefined,
   row: T
 ) => {
-  return column.render ? () => column.render({ row, value }) : () => value;
+  return render ? () => render({ row, value }) : () => value;
+};
+
+const makeHeaderRender = (
+  label: string,
+  render: HeaderRenderType | undefined
+) => {
+  return render ? () => render({ label }) : () => label;
 };
 
 const sortDataInOrder = <T extends DataType>(
@@ -278,6 +302,7 @@ const getColumnsByName = <T extends DataType>(
     const col: any = {
       label: column.label,
     };
+
     if (column.render) {
       col['render'] = column.render;
     }

src/test/selectionGlobalFiltering.spec.tsx

@@ -50,7 +50,7 @@ const TableWithSelection = <T extends DataType>({
           <tr>
             <th></th>
             {headers.map((header, idx) => (
-              <th key={idx}>{header.label}</th>
+              <th key={idx}>{header.render()}</th>
             ))}
           </tr>
         </thead>
@@ -135,7 +135,7 @@ const TableWithFilter = <T extends DataType>({
       <thead>
         <tr>
           {headers.map((header, idx) => (
-            <th key={idx}>{header.label}</th>
+            <th key={idx}>{header.render()}</th>
           ))}
         </tr>
       </thead>
@@ -217,7 +217,7 @@ const TableWithSelectionAndFiltering = <T extends DataType>({
           <tr>
             <th></th>
             {headers.map((header, idx) => (
-              <th key={idx}>{header.label}</th>
+              <th key={idx}>{header.render()}</th>
             ))}
           </tr>
         </thead>

src/test/table.spec.tsx

@@ -43,7 +43,7 @@ const Table = ({
       <thead>
         <tr>
           {headers.map((header, idx) => (
-            <th key={idx}>{header.label}</th>
+            <th key={idx}>{header.render()}</th>
           ))}
         </tr>
       </thead>
@@ -99,12 +99,30 @@ const columnsWithRender: ColumnType<any>[] = [
   },
 ];
 
-test('Should see custom render HTML', () => {
+test('Should see custom row render HTML', () => {
   const rtl = render(<Table columns={columnsWithRender} data={data} />);
 
   expect(rtl.getAllByTestId('first-name')).toHaveLength(2);
 });
 
+const columnsWithColRender: ColumnType<any>[] = [
+  {
+    name: 'firstName',
+    label: 'First Name',
+    headerRender: ({ label }) => <h1 data-testid="first-name">{label}</h1>,
+  },
+  {
+    name: 'lastName',
+    label: 'Last Name',
+  },
+];
+
+test('Should see custom column render HTML', () => {
+  const rtl = render(<Table columns={columnsWithColRender} data={data} />);
+
+  expect(rtl.getAllByTestId('first-name')).toHaveLength(1);
+});
+
 // to supress console error from test output
 beforeEach(() => {
   jest.spyOn(console, 'error').mockImplementation(() => {});

src/types.ts

@@ -3,9 +3,24 @@ export type ColumnType<T> = {
   label?: string;
   hidden?: boolean;
   sort?: ((a: RowType<T>, b: RowType<T>) => number) | undefined;
-  render?: (value: any) => React.ReactNode;
+  render?: ({ value, row }: { value: any; row: T }) => React.ReactNode;
+  headerRender?: HeaderRenderType;
 };
 
+export type ColumnStateType<T> = {
+  name: string;
+  label: string;
+  hidden: boolean;
+  sort?: ((a: RowType<T>, b: RowType<T>) => number) | undefined;
+  sorted: {
+    on: boolean;
+    asc: boolean;
+  };
+  headerRender?: HeaderRenderType;
+};
+
+export type HeaderRenderType = ({ label }: { label: any }) => React.ReactNode;
+
 // this is the type saved as state and returned
 export type HeaderType<T> = {
   name: string;
@@ -16,23 +31,23 @@ export type HeaderType<T> = {
     asc: boolean;
   };
   sort?: ((a: RowType<T>, b: RowType<T>) => number) | undefined;
-  render?: (value: any) => React.ReactNode;
+  render: () => React.ReactNode;
 };
 
 export type DataType = { [key: string]: any };
 
 export type ColumnByNamesType<T> = {
-  [key: string]: ColumnByNameType<T>;
+  [key: string]: ColumnType<T>;
 };
 
-export type RenderFunctionType = ({
+export type RenderFunctionType<T> = ({
   value,
   row,
-}: RenderFunctionArgsType) => React.ReactNode | undefined;
+}: RenderFunctionArgsType<T>) => React.ReactNode | undefined;
 
-type RenderFunctionArgsType = {
+type RenderFunctionArgsType<T> = {
   value: any;
-  row: Object;
+  row: T;
 };
 
 export type ColumnByNameType<T> = Omit<
@@ -93,7 +108,7 @@ export interface UseTableReturnType<T> {
 
 export type TableState<T extends DataType> = {
   columnsByName: ColumnByNamesType<T>;
-  columns: HeaderType<T>[];
+  columns: ColumnStateType<T>[];
   rows: RowType<T>[];
   originalRows: RowType<T>[];
   selectedRows: RowType<T>[];