vira/dist/util/define-table.js

A simple and highly versatile design system using element-vir.

import { check } from '@augment-vir/assert';
import { filterMap } from '@augment-vir/common';
/**
 * Orientation options for {@link ViraTable}.
 *
 * @category Internal
 */
export var ViraTableOrientation;
(function (ViraTableOrientation) {
    /**
     * This corresponds to a _vertical_ entry sequence (as you move from entry to entry, you move
     * across the table vertically). This is the default table layout. Each entry becomes a new row.
     * Headers are in a separate row.
     */
    ViraTableOrientation["Vertical"] = "vertical";
    /**
     * This corresponds to a _horizontal_ entry sequence (as you move from entry to entry, you move
     * across the table horizontally). Each entry becomes a column. Headers are the left most
     * column.
     */
    ViraTableOrientation["Horizontal"] = "horizontal";
})(ViraTableOrientation || (ViraTableOrientation = {}));
/**
 * Accepts headers and entries and lays them out into rows according to the given
 * `options.orientation` (defaulting to vertical). This does not itself create a `<table>` element,
 * but makes it easy to loop over rows to (with `.map()`) to generate rows in a table.
 *
 * @category Table
 */
export function defineTable(
/** The order of these keys determines the order that they render in. */
{ headers, originalData, dataMap, options = {}, }) {
    const mappedData = originalData.map((dataRow, rowIndex) => {
        return {
            cells: dataMap(dataRow, rowIndex),
            data: dataRow,
        };
    });
    if (options.orientation === ViraTableOrientation.Horizontal) {
        const rows = filterMap(headers, (header) => {
            if (header.disabled) {
                return undefined;
            }
            const headerCellArray = options.hideHeaders
                ? []
                : [
                    {
                        content: header.content ?? header.key,
                        key: header.key,
                        data: undefined,
                    },
                ];
            const cells = filterMap(mappedData, ({ data, cells, }) => {
                if (!cells) {
                    return undefined;
                }
                return {
                    content: cells[header.key],
                    key: header.key,
                    data,
                };
            }, check.isTruthy);
            const allCells = [
                ...headerCellArray,
                ...cells,
            ];
            return {
                cells: allCells,
                data: undefined,
            };
        }, check.isTruthy);
        return {
            headerRow: undefined,
            rows,
            orientation: ViraTableOrientation.Horizontal,
        };
    }
    else {
        const headerRow = options.hideHeaders
            ? []
            : filterMap(headers, (header) => {
                if (header.disabled) {
                    return undefined;
                }
                return {
                    content: header.content ?? header.key,
                    key: header.key,
                    data: undefined,
                };
            }, check.isTruthy);
        const rows = filterMap(mappedData, ({ cells, data }) => {
            if (!cells) {
                return undefined;
            }
            return {
                cells: filterMap(headers, (header) => {
                    if (header.disabled) {
                        return undefined;
                    }
                    return {
                        content: cells[header.key],
                        key: header.key,
                        data,
                    };
                }, check.isTruthy),
                data,
            };
        }, check.isTruthy);
        return {
            headerRow,
            rows,
            orientation: ViraTableOrientation.Vertical,
        };
    }
}