@furystack/shades-common-components/esm/components/data-grid/selection-cell.js

Common UI components for FuryStack Shades

import { createComponent, Shade } from '@furystack/shades';
import { cssVariableTheme } from '../../services/css-variable-theme.js';
export const SelectionCell = Shade({
    customElementName: 'shades-data-grid-selection-cell',
    css: {
        display: 'inline-flex',
        fontFamily: cssVariableTheme.typography.fontFamily,
        alignItems: 'center',
        justifyContent: 'center',
        '& input[type="checkbox"]': {
            cursor: 'pointer',
            width: '18px',
            height: '18px',
            accentColor: cssVariableTheme.palette.primary.main,
        },
    },
    render: ({ props, useObservable }) => {
        const [selection] = useObservable('selection', props.service.selection);
        const isSelected = selection.includes(props.entry);
        return (createComponent("input", { tabIndex: -1, onchange: () => {
                props.service.toggleSelection(props.entry);
            }, type: "checkbox", checked: isSelected }));
    },
});
//# sourceMappingURL=selection-cell.js.map