title: is there a way to pass an external component (dropdown) to a react table header?
body: <p>I am trying to achieve something like <a href="https://i.stack.imgur.com/o2OYI.png" rel="nofollow noreferrer">this screenshot</a>.
  It is basically a dropdown that gets triggered when I hover the header &quot;state&quot; - by default the state is &quot;state: All&quot;. the initial state comes from redux. as shown here below. Below I am using this redux state in the <strong>payoutsTable</strong> in the corresponding column definition:</p>
  <blockquote>
  <p>import { currentStatus } from 'redux/slices/statusSlice';</p>
  </blockquote>
  <blockquote>
  <p>import { useSelector } from 'react-redux';</p>
  </blockquote>
  <pre><code>interface PayoutsTableProps extends Omit&lt;DataTableProps, 'columns'&gt; {
    data: PayoutData[];
    onRowClick?: (event: React.MouseEvent&lt;HTMLElement&gt;, rowData: any) =&gt; void;
  }
  
  const PayoutsTable: FC&lt;PayoutsTableProps&gt; = (props) =&gt; {
    const { status } = useSelector(currentStatus);
  
    const columns = useMemo&lt;ColumnDef&lt;PayoutData&gt;[]&gt;(
      () =&gt; [
        {
          id: 'amount_icon',
          accessorKey: 'amount',
          className: 'w-16 !p-0',
          cell: () =&gt; (
            &lt;div className=&quot;relative m-auto w-6&quot;&gt;
              &lt;DatabaseIcon className=&quot;w-6 stroke-inpay-black-haze-500 stroke-1 group-hover:stroke-inpay-cascade group-active:stroke-inpay-cascade&quot; /&gt;
              &lt;MinusCircleIcon className=&quot;absolute top-2.5 left-2.5 w-5 fill-rose-200 stroke-1&quot; /&gt;
            &lt;/div&gt;
          )
        },
        {
          id: 'space-0',
          className: 'w-10'
        },
        {
          id: 'date',
          accessorKey: 'created_at',
          className: 'w-20',
          enableSorting: true,
          header: 'Date',
          cell: (info) =&gt; (
            &lt;&gt;
              &lt;FormattedDate value={info.getValue()} /&gt;
              &lt;div className=&quot;text-base font-medium&quot;&gt;
                {formatUtcHours(info.getValue())}
              &lt;/div&gt;
            &lt;/&gt;
          )
        },
        {
          id: 'space-1',
          className: 'min-w-[2.5rem]'
        },
        {
          id: 'id_reference',
          accessorFn: (row) =&gt; ({
            id: row.end_to_end_id,
            reference: row.inpay_unique_reference
          }),
          header: 'ID/Reference',
          className: 'text-center',
          cell: (info) =&gt; {
            const value = info.getValue&lt;{ id: string; reference: string }&gt;();
            return (
              &lt;div className=&quot;m-auto w-20 text-left uppercase&quot;&gt;
                &lt;FormattedIdentifier
                  value={value.id}
                  className=&quot;whitespace-nowrap text-xs&quot;
                /&gt;
                &lt;FormattedIdentifier
                  value={value.reference}
                  className=&quot;text-base font-medium&quot;
                /&gt;
              &lt;/div&gt;
            );
          }
        },
        {
          id: 'space-2',
          className: 'min-w-[2.5rem]'
        },
        {
          id: 'amount',
          accessorFn: (row) =&gt; ({ amount: row.amount, currency: row.currency }),
          enableSorting: true,
          header: 'Amount',
          className: 'w-20 text-right',
          cell: (info) =&gt; {
            const value = info.getValue&lt;{ amount: number; currency: string }&gt;();
            return (
              &lt;&gt;
                &lt;div className=&quot;text-xs font-normal uppercase&quot;&gt;
                  {value.currency}
                &lt;/div&gt;
                &lt;div className=&quot;whitespace-nowrap text-base font-medium&quot;&gt;
                  - {getFormat(false, undefined, false).format(value.amount)}
                &lt;/div&gt;
              &lt;/&gt;
            );
          }
        },
        {
          id: 'space-3',
          className: 'min-w-[2.5rem]'
        },
        {
          id: 'state',
          header: `State:${status}`,
          accessorKey: 'state',
          className: 'text-right w-28',
          cell: (info) =&gt; &lt;PayoutBadge type={info.getValue&lt;PayoutState&gt;()} /&gt;
        },
        {
          id: 'space-4',
          className: 'min-w-[1rem] w-10'
        },
        {
          id: 'column_params',
          className: 'w-10',
          cell: () =&gt; (
            &lt;ChevronRightIcon className=&quot;-ml-2 h-7 stroke-inpay-black-haze-700 group-hover:stroke-inpay-black-500 group-active:stroke-inpay-black-500&quot; /&gt;
          )
        }
      ],
      []
    );
  
    return &lt;DataTable columns={columns} className=&quot;min-w-[700px]&quot; {...props} /&gt;;
  };
  
  export default PayoutsTable;
  </code></pre>
  <p>The issue I am having is trying to understand how to pass this unfinished component <strong>StatusDropDownList</strong> to the header state when I hover to the header state:</p>
  <pre><code>import PayoutBadge from 'components/ui/atoms/PayoutBadge';
  
  const statuses = [
    'all',
    'received',
    'processing',
    'action_required',
    'rejected',
    'completed',
    'returned',
    'pending'
  ];
  
  const StatusDropDownList = () =&gt; {
    return statuses.map((status, index) =&gt; (
      &lt;PayoutBadge key={index} type={status} /&gt;
    ));
  };
  
  export default StatusDropDownList;
  </code></pre>
  <p>I have checked react table but i cannot see a way to be able to pass it. Any clues? I am wondering if I should pass it to the <strong>dataTable</strong> which is the table itself (children of the <strong>payoutsTable</strong>. It looks like as follow:</p>
  <pre><code>  export interface DataTableProps {
    data: any[];
    columns: ColumnDef&lt;any&gt;[];
    title?: ReactNode;
    onSortingChange?: (state: SortingState) =&gt; void;
    initialSorting?: { id: string; desc: boolean }[];
    isFetching?: boolean;
    onRowClick?: (event: React.MouseEvent&lt;HTMLElement&gt;, data: any) =&gt; any;
    pagination?: PaginatorProps;
    className?: string;
    currentRow?: {
      value?: string;
      field: string;
    };
  }
  
  const DataTable: FC&lt;DataTableProps&gt; = ({
    data,
    columns,
    title,
    onSortingChange,
    initialSorting = [{ id: 'date', desc: true }],
    onRowClick,
    pagination,
    currentRow,
    className = ''
  }) =&gt; {
    const [sorting, setSorting] = useState&lt;SortingState&gt;(initialSorting);
    const onSortingChangeInternal: OnChangeFn&lt;SortingState&gt; = (updater) =&gt; {
      const newState = functionalUpdate(updater, sorting);
      setSorting(newState);
      onSortingChange &amp;&amp; onSortingChange(newState);
    };
  
    const table = useReactTable({
      data,
      columns,
      defaultColumn: {
        enableSorting: false,
        header: ''
      },
      state: {
        sorting
      },
      onSortingChange: onSortingChangeInternal,
      getCoreRowModel: getCoreRowModel(),
      sortDescFirst: true,
      enableSortingRemoval: false,
      manualSorting: true
    });
  
    return (
      &lt;div
        className={cn(
          'datatable flex max-h-full flex-col drop-shadow-plain-lg',
          className
        )}
      &gt;
        {title &amp;&amp; (
          &lt;div className=&quot;flex gap-1 rounded-t-lg border-b border-b-inpay-pumice bg-white px-6 py-3.5&quot;&gt;
            {title}
          &lt;/div&gt;
        )}
        &lt;div className=&quot;datatable no-scrollbar h-full overflow-scroll bg-white&quot;&gt;
          &lt;table className=&quot;w-full table-fixed border-separate border-spacing-0&quot;&gt;
            &lt;thead className=&quot;sticky top-0 bg-inpay-green-200&quot;&gt;
              {table.getHeaderGroups().map((headerGroup: any) =&gt; (
                &lt;tr key={headerGroup.id}&gt;
                  {headerGroup.headers.map((header: any) =&gt; (
                    &lt;th
                      key={header.id}
                      colSpan={header.colSpan}
                      className={cn(
                        header.column.columnDef.className,
                        'border-b border-b-inpay-pumice py-2 text-left text-sm font-normal',
                        {
                          'hover:text-inpay-green-700': header.column.getCanSort()
                        }
                      )}
                    &gt;
                      {header.isPlaceholder ? null : (
                        &lt;span
                          className={cn('whitespace-nowrap', {
                            'cursor-pointer select-none':
                              header.column.getCanSort()
                          })}
                          onClick={header.column.getToggleSortingHandler()}
                        &gt;
                          {flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                          {header.column.columnDef.enableSorting &amp;&amp; (
                            &lt;SelectorIcon
                              className=&quot;ml-1&quot;
                              sorted={header.column.getIsSorted()}
                            /&gt;
                          )}
                        &lt;/span&gt;
                      )}
                    &lt;/th&gt;
                  ))}
                &lt;/tr&gt;
              ))}
            &lt;/thead&gt;
            &lt;tbody className=&quot;bg-white&quot;&gt;
              {table.getRowModel().rows.map((row) =&gt; {
                return (
                  &lt;tr
                    key={row.id}
                    onClick={
                      onRowClick
                        ? (event) =&gt; onRowClick(event, row.original)
                        : undefined
                    }
                    data-active={
                      (currentRow &amp;&amp;
                        row.original[currentRow.field] == currentRow.value) ||
                      null
                    }
                    className={cn(
                      'data-table__row group h-5 hover:bg-inpay-alabaster',
                      'active:bg-inpay-alabaster',
                      {
                        'cursor-pointer': onRowClick
                      }
                    )}
                  &gt;
                    {row.getVisibleCells().map((cell: any) =&gt; (
                      &lt;td
                        key={cell.id}
                        className={cn(
                          cell.column.columnDef.className,
                          'border-b border-b-inpay-pumice py-4 group-last:border-b-0'
                        )}
                      &gt;
                        {flexRender(
                          cell.column.columnDef.cell,
                          cell.getContext()
                        )}
                      &lt;/td&gt;
                    ))}
                  &lt;/tr&gt;
                );
              })}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
        {pagination &amp;&amp; (
          &lt;div
            className={cn(
              'flex h-13 w-full shrink-0 items-center justify-center rounded-b-lg border-t-inpay-pumice bg-white px-6',
              { 'border-t': data.length &gt; 0 }
            )}
          &gt;
            &lt;Paginator {...pagination} /&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  };
  </code></pre>