@legumeinfo/web-components/lib/core/lis-simple-table-element.d.ts

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
import { Ref } from 'lit/directives/ref.js';
import { LisSlotController } from '../controllers';
import { StringObjectModel } from '../models';
/**
 * @htmlElement `<lis-simple-table-element>`
 *
 * A Web Component that provides a generic table element.
 *
 * @slot - Adds content after the content defined via the component properties.
 * Can be used to manually create a table that has the same styling as the
 * component.
 *
 * @example
 * The simple table element's
 * {@link caption | `caption`}, {@link dataAttributes | `dataAttributes`}, and
 * {@link header | `header`} attributes/properties can be set via HTML or
 * JavaScript. However, {@link !HTMLElement | `HTMLElement`} properties can only
 * be set via JavaScript, meaning the {@link data | `data`} property can only be
 * set via a `<lis-simple-table-element>` tag's instance of the
 * {@link LisSimpleTableElement | `LisSimpleTableElement`} class. For example:
 * ```html
 * <!-- set the caption, dataAttributes, and header attributes/properties via HTML -->
 * <lis-simple-table-element
 *   caption="My cheesy table"
 *   dataAttributes="['cheese', 'region']"
 *   header="{cheese: 'Cheese', region: 'Region'}">
 * </lis-simple-table-element>
 *
 * <!-- set all attributes/properties via JavaScript -->
 * <lis-simple-table-element id="table"></lis-simple-table-element>
 * <script type="text/javascript">
 *   // get the simple table element
 *   const tableElement = document.getElementById('table');
 *   // set the element's properties
 *   tableElement.caption = 'My cheesy table';
 *   tableElement.dataAttributes = ['cheese', 'region'];
 *   tableElement.header = {cheese: 'Cheese', region: 'Region'};
 *   tableElement.data = [
 *     {cheese: 'Brie', region: 'France'},
 *     {cheese: 'Burrata', region: 'Italy'},
 *     {cheese: 'Feta', region: 'Greece'},
 *     {cheese: 'Gouda', region: 'Netherlands'},
 *   ];
 * </script>
 * ```
 *
 * @example
 * Alternatively, a simple table's contents can be written in HTML using the element's
 * slot. This content must be wrapped in a `<template>` tag so the Web Browser
 * doesn't strip the tags as invalid since they occur outside of actual `<table>` tags.
 * Note that this will override any content assigned via JavaScript:
 * ```html
 * <!-- set the caption, dataAttributes, and header attributes/properties via HTML -->
 * <!-- NOTE: this is the table produced by the previous example -->
 * <lis-simple-table-element>
 *   <template>
 *     <caption>My cheesy table</caption>
 *     <thead>
 *       <tr>
 *         <th>Cheese</th>
 *         <th>Region</th>
 *       </tr>
 *     </thead>
 *     <tbody>
 *       <tr>
 *         <td>Brie</td>
 *         <td>France</td>
 *       </tr>
 *       <tr>
 *         <td>Burrata</td>
 *         <td>Italy</td>
 *       </tr>
 *       <tr>
 *         <td>Feta</td>
 *         <td>Greece</td>
 *       </tr>
 *       <tr>
 *         <td>Gouda</td>
 *         <td>Netherlands</td>
 *       </tr>
 *     </tbody>
 *   </template>
 * </lis-simple-table-element>
 * ```
 */
export declare class LisSimpleTableElement extends LitElement {
    /** @ignore */
    static styles: import("lit").CSSResult;
    /** @ignore */
    createRenderRoot(): this;
    protected defaultSlotRef: Ref<HTMLSlotElement>;
    protected slotController: LisSlotController;
    /**
     * The caption shown above the table.
     *
     * @attribute
     */
    caption: string;
    /**
     * An ordered list of attributes in the input data objects used to populate
     * table rows. Assumed to be invariant if assigned as an attribute.
     *
     * @attribute
     */
    dataAttributes: Array<string>;
    /**
     * A single object mapping attributes to header labels. Assumed to be
     * invariant if assigned as an attribute.
     *
     * @attribute
     */
    header: StringObjectModel;
    /**
     * A single object mapping attributes to table column classes. Assumed to be
     * invariant if assigned as an attribute.
     *
     * @attribute
     */
    columnClasses: StringObjectModel;
    /**
     * The data to display in the table. Only attributes defined in the
     * {@link dataAttributes | `dataAttributes`} property will be parsed from the
     * objects.
     */
    data: Array<StringObjectModel>;
    constructor();
    /** @ignore */
    private _objectToRow;
    /** @ignore */
    private _getCaption;
    /** @ignore */
    private _getHeader;
    /** @ignore */
    private _getBody;
    /** @ignore */
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-simple-table-element': LisSimpleTableElement;
    }
}
//# sourceMappingURL=lis-simple-table-element.d.ts.map