我正在努力實現(xiàn)類似這樣的截圖/圖片-1/。 它基本上是一個下拉菜單，當(dāng)我將鼠標(biāo)懸停在標(biāo)題上時就會被觸發(fā)。國家& quot-默認情況下，狀態(tài)為& quot狀態(tài):所有& quot。初始狀態(tài)來自redux。如下圖所示。下面，我在payoutsTable的相應(yīng)列定義中使用了這個redux狀態(tài):

從“redux/slices/statusSlice”導(dǎo)入{ current status }；

從“react-redux”導(dǎo)入{ use selector }；

interface PayoutsTableProps extends Omit<DataTableProps, 'columns'> {
  data: PayoutData[];
  onRowClick?: (event: React.MouseEvent<HTMLElement>, rowData: any) => void;
}

const PayoutsTable: FC<PayoutsTableProps> = (props) => {
  const { status } = useSelector(currentStatus);

  const columns = useMemo<ColumnDef<PayoutData>[]>(
    () => [
      {
        id: 'amount_icon',
        accessorKey: 'amount',
        className: 'w-16 !p-0',
        cell: () => (
          <div className="relative m-auto w-6">
            <DatabaseIcon className="w-6 stroke-inpay-black-haze-500 stroke-1 group-hover:stroke-inpay-cascade group-active:stroke-inpay-cascade" />
            <MinusCircleIcon className="absolute top-2.5 left-2.5 w-5 fill-rose-200 stroke-1" />
          </div>
        )
      },
      {
        id: 'space-0',
        className: 'w-10'
      },
      {
        id: 'date',
        accessorKey: 'created_at',
        className: 'w-20',
        enableSorting: true,
        header: 'Date',
        cell: (info) => (
          <>
            <FormattedDate value={info.getValue()} />
            <div className="text-base font-medium">
              {formatUtcHours(info.getValue())}
            </div>
          </>
        )
      },
      {
        id: 'space-1',
        className: 'min-w-[2.5rem]'
      },
      {
        id: 'id_reference',
        accessorFn: (row) => ({
          id: row.end_to_end_id,
          reference: row.inpay_unique_reference
        }),
        header: 'ID/Reference',
        className: 'text-center',
        cell: (info) => {
          const value = info.getValue<{ id: string; reference: string }>();
          return (
            <div className="m-auto w-20 text-left uppercase">
              <FormattedIdentifier
                value={value.id}
                className="whitespace-nowrap text-xs"
              />
              <FormattedIdentifier
                value={value.reference}
                className="text-base font-medium"
              />
            </div>
          );
        }
      },
      {
        id: 'space-2',
        className: 'min-w-[2.5rem]'
      },
      {
        id: 'amount',
        accessorFn: (row) => ({ amount: row.amount, currency: row.currency }),
        enableSorting: true,
        header: 'Amount',
        className: 'w-20 text-right',
        cell: (info) => {
          const value = info.getValue<{ amount: number; currency: string }>();
          return (
            <>
              <div className="text-xs font-normal uppercase">
                {value.currency}
              </div>
              <div className="whitespace-nowrap text-base font-medium">
                - {getFormat(false, undefined, false).format(value.amount)}
              </div>
            </>
          );
        }
      },
      {
        id: 'space-3',
        className: 'min-w-[2.5rem]'
      },
      {
        id: 'state',
        header: `State:${status}`,
        accessorKey: 'state',
        className: 'text-right w-28',
        cell: (info) => <PayoutBadge type={info.getValue<PayoutState>()} />
      },
      {
        id: 'space-4',
        className: 'min-w-[1rem] w-10'
      },
      {
        id: 'column_params',
        className: 'w-10',
        cell: () => (
          <ChevronRightIcon className="-ml-2 h-7 stroke-inpay-black-haze-700 group-hover:stroke-inpay-black-500 group-active:stroke-inpay-black-500" />
        )
      }
    ],
    []
  );

  return <DataTable columns={columns} className="min-w-[700px]" {...props} />;
};

export default PayoutsTable;

我遇到的問題是試圖理解當(dāng)我懸停在標(biāo)題狀態(tài)時，如何將這個未完成的組件StatusDropDownList傳遞到標(biāo)題狀態(tài):

import PayoutBadge from 'components/ui/atoms/PayoutBadge';

const statuses = [
  'all',
  'received',
  'processing',
  'action_required',
  'rejected',
  'completed',
  'returned',
  'pending'
];

const StatusDropDownList = () => {
  return statuses.map((status, index) => (
    <PayoutBadge key={index} type={status} />
  ));
};

export default StatusDropDownList;

我已經(jīng)檢查了反應(yīng)表，但我看不到能夠通過它的方法。有線索嗎？我想知道是否應(yīng)該將它傳遞給數(shù)據(jù)表，即表本身(payoutsTable的子表。它看起來如下:

export interface DataTableProps {
  data: any[];
  columns: ColumnDef<any>[];
  title?: ReactNode;
  onSortingChange?: (state: SortingState) => void;
  initialSorting?: { id: string; desc: boolean }[];
  isFetching?: boolean;
  onRowClick?: (event: React.MouseEvent<HTMLElement>, data: any) => any;
  pagination?: PaginatorProps;
  className?: string;
  currentRow?: {
    value?: string;
    field: string;
  };
}

const DataTable: FC<DataTableProps> = ({
  data,
  columns,
  title,
  onSortingChange,
  initialSorting = [{ id: 'date', desc: true }],
  onRowClick,
  pagination,
  currentRow,
  className = ''
}) => {
  const [sorting, setSorting] = useState<SortingState>(initialSorting);
  const onSortingChangeInternal: OnChangeFn<SortingState> = (updater) => {
    const newState = functionalUpdate(updater, sorting);
    setSorting(newState);
    onSortingChange && onSortingChange(newState);
  };

  const table = useReactTable({
    data,
    columns,
    defaultColumn: {
      enableSorting: false,
      header: ''
    },
    state: {
      sorting
    },
    onSortingChange: onSortingChangeInternal,
    getCoreRowModel: getCoreRowModel(),
    sortDescFirst: true,
    enableSortingRemoval: false,
    manualSorting: true
  });

  return (
    <div
      className={cn(
        'datatable flex max-h-full flex-col drop-shadow-plain-lg',
        className
      )}
    >
      {title && (
        <div className="flex gap-1 rounded-t-lg border-b border-b-inpay-pumice bg-white px-6 py-3.5">
          {title}
        </div>
      )}
      <div className="datatable no-scrollbar h-full overflow-scroll bg-white">
        <table className="w-full table-fixed border-separate border-spacing-0">
          <thead className="sticky top-0 bg-inpay-green-200">
            {table.getHeaderGroups().map((headerGroup: any) => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map((header: any) => (
                  <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()
                      }
                    )}
                  >
                    {header.isPlaceholder ? null : (
                      <span
                        className={cn('whitespace-nowrap', {
                          'cursor-pointer select-none':
                            header.column.getCanSort()
                        })}
                        onClick={header.column.getToggleSortingHandler()}
                      >
                        {flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                        {header.column.columnDef.enableSorting && (
                          <SelectorIcon
                            className="ml-1"
                            sorted={header.column.getIsSorted()}
                          />
                        )}
                      </span>
                    )}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody className="bg-white">
            {table.getRowModel().rows.map((row) => {
              return (
                <tr
                  key={row.id}
                  onClick={
                    onRowClick
                      ? (event) => onRowClick(event, row.original)
                      : undefined
                  }
                  data-active={
                    (currentRow &&
                      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
                    }
                  )}
                >
                  {row.getVisibleCells().map((cell: any) => (
                    <td
                      key={cell.id}
                      className={cn(
                        cell.column.columnDef.className,
                        'border-b border-b-inpay-pumice py-4 group-last:border-b-0'
                      )}
                    >
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </td>
                  ))}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {pagination && (
        <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 > 0 }
          )}
        >
          <Paginator {...pagination} />
        </div>
      )}
    </div>
  );
};