@furystack/shades-common-components/esm/components/grid.js

import { Shade, createComponent } from '@furystack/shades';
import { ThemeProviderService } from '../services/theme-provider-service.js';
export const Grid = Shade({
    shadowDomName: 'shade-grid',
    render: ({ props, injector }) => {
        const { theme } = injector.getInstance(ThemeProviderService);
        const headerStyle = {
            padding: '0 0.51em',
            backgroundColor: theme.background.paper,
            color: theme.text.secondary,
            borderRadius: '2px',
            top: '0',
            position: 'sticky',
            cursor: 'pointer',
            fontVariant: 'all-petite-caps',
            ...props.styles?.header,
        };
        return (createComponent("div", { className: "shade-grid-wrapper", style: {
                ...props.styles?.wrapper,
                width: '100%',
                height: '100%',
                overflow: 'auto',
            } },
            createComponent("table", { style: { width: '100%', position: 'relative' } },
                createComponent("thead", null,
                    createComponent("tr", null, props.columns.map((column) => {
                        return (createComponent("th", { style: headerStyle }, props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (createComponent(createComponent, null, column))));
                    }))),
                createComponent("tbody", null, props.entries.map((entry) => (createComponent("tr", null, props.columns.map((column) => (createComponent("td", { style: props.styles?.cell }, props.rowComponents?.[column]?.(entry, column) ||
                    props.rowComponents?.default?.(entry, column) ||
                    null))))))))));
    },
});
//# sourceMappingURL=grid.js.map