@coveord/plasma-mantine/dist/esm/components/table/table-header/Th.js

A Plasma flavoured Mantine theme

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px } from '@coveord/plasma-react-icons';
import { Group, UnstyledButton, useProps } from '@mantine/core';
import { defaultColumnSizing, flexRender } from '@tanstack/react-table';
import { identity } from '../../../utils';
import { useTableContext } from '../TableContext';
const SortingIcons = {
    asc: ArrowUpSize16Px,
    desc: ArrowDownSize16Px,
    none: DoubleArrowHeadVSize16Px
};
const SortingLabels = {
    asc: 'ascending',
    desc: 'descending',
    none: 'none'
};
const defaultProps = {
    sortingIcons: SortingIcons
};
export const Th = (props)=>{
    const { getStyles } = useTableContext();
    const { header, sortingIcons, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableTh', defaultProps, props);
    const columnSizing = {
        ...defaultColumnSizing,
        size: header.column.columnDef.size,
        minSize: header.column.columnDef.minSize,
        maxSize: header.column.columnDef.maxSize
    };
    const thStyles = getStyles('th', {
        classNames,
        className,
        styles,
        style
    });
    if (header.isPlaceholder) {
        return null;
    }
    if (!header.column.getCanSort()) {
        return /*#__PURE__*/ _jsx("th", {
            className: thStyles.className,
            style: {
                ...thStyles.style,
                width: columnSizing.size ?? 'auto',
                minWidth: columnSizing.minSize,
                maxWidth: columnSizing.maxSize
            },
            ...others,
            children: /*#__PURE__*/ _jsx(Group, {
                wrap: "nowrap",
                gap: "xs",
                children: flexRender(header.column.columnDef.header, header.getContext())
            })
        });
    }
    const onSort = header.column.getToggleSortingHandler();
    const sortingOrder = header.column.getIsSorted() || 'none';
    const Icon = sortingIcons[sortingOrder];
    return /*#__PURE__*/ _jsx(UnstyledButton, {
        component: "th",
        onClick: onSort,
        "aria-sort": SortingLabels[sortingOrder],
        "data-control": true,
        ...thStyles,
        ...others,
        children: /*#__PURE__*/ _jsxs(Group, {
            wrap: "nowrap",
            gap: "xs",
            children: [
                flexRender(header.column.columnDef.header, header.getContext()),
                /*#__PURE__*/ _jsx(Icon, {
                    height: 16,
                    width: 16
                })
            ]
        })
    });
};
Th.extend = identity;

//# sourceMappingURL=Th.js.map