diff --git a/packages/actify/src/components/Table/Table.tsx b/packages/actify/src/components/Table/Table.tsx index d1ec762..5dbd00a 100644 --- a/packages/actify/src/components/Table/Table.tsx +++ b/packages/actify/src/components/Table/Table.tsx @@ -42,13 +42,13 @@ const Table = (props: TableComponentProps) => { column.props.isSelectionCell ? ( ) : ( ) diff --git a/packages/actify/src/components/Table/TableColumnHeader.tsx b/packages/actify/src/components/Table/TableColumnHeader.tsx index 9a81854..781e418 100644 --- a/packages/actify/src/components/Table/TableColumnHeader.tsx +++ b/packages/actify/src/components/Table/TableColumnHeader.tsx @@ -1,43 +1,42 @@ -import { mergeProps, useFocusRing, useTableColumnHeader } from 'react-aria' +import { + AriaTableCellProps, + mergeProps, + useFocusRing, + useTableColumnHeader +} from 'react-aria' import { FocusRing } from '../FocusRing' -import { GridNode } from '@react-types/grid' import { Icon } from '../Icon' import React from 'react' import { TableState } from 'react-stately' import styles from './table.module.css' -interface TableColumnHeaderProps extends React.ComponentProps<'th'> { - column: GridNode +interface TableColumnHeaderProps extends AriaTableCellProps { state: TableState } const TableColumnHeader = ({ - column, + node, state }: TableColumnHeaderProps) => { const ref = React.useRef(null) - const { columnHeaderProps } = useTableColumnHeader( - { node: column }, - state, - ref - ) - const isSortVisible = state.sortDescriptor?.column === column.key + const { columnHeaderProps } = useTableColumnHeader({ node }, state, ref) + const isSortVisible = state.sortDescriptor?.column === node.key const { isFocusVisible, focusProps } = useFocusRing() return ( 1 ? 'center' : 'left', - cursor: column.props.allowsSorting ? 'pointer' : 'default' + textAlign: node.colspan! > 1 ? 'center' : 'left', + cursor: node.props.allowsSorting ? 'pointer' : 'default' }} {...mergeProps(columnHeaderProps, focusProps)} > {isFocusVisible && } - {column.rendered} - {column.props.allowsSorting && ( + {node.rendered} + {node.props.allowsSorting && (