@umbraco-ui/uui-table/custom-elements.json

A basic loader element

{
  "version": "experimental",
  "tags": [
    {
      "name": "uui-table-cell",
      "path": "./lib/uui-table-cell.element.ts",
      "description": "Table cell that detects if it has overflow and if so it'll add a title attribute to itself to display full text. Must be a child of uui-table-row",
      "attributes": [
        {
          "name": "disable-child-interaction",
          "description": "Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "no-padding",
          "description": "Remove padding in order to have element going to the edge of the cell.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "clip-text",
          "description": "Enable overflow ellipsis",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "disableChildInteraction",
          "attribute": "disable-child-interaction",
          "description": "Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "noPadding",
          "attribute": "no-padding",
          "description": "Remove padding in order to have element going to the edge of the cell.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "clipText",
          "attribute": "clip-text",
          "description": "Enable overflow ellipsis",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "slot for table cell content"
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-table-cell-padding",
          "description": "overwrite the table cell padding"
        },
        {
          "name": "--uui-table-cell-height",
          "description": "overwrite the table cell height"
        }
      ]
    },
    {
      "name": "uui-table-column",
      "path": "./lib/uui-table-column.element.ts",
      "description": "Table column element. Equivalent of native col. Any styles you apply to it will be applied to the corresponding column in the table. Must be a child of uui-table. If you want to have unstyled column between two styled columns put this element into the markup without any styles applied to it.",
      "properties": [
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        }
      ]
    },
    {
      "name": "uui-table-head-cell",
      "path": "./lib/uui-table-head-cell.element.ts",
      "description": "Child element of uui-table-head. Use it there.",
      "attributes": [
        {
          "name": "disable-child-interaction",
          "description": "Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "no-padding",
          "description": "Remove padding in order to have element going to the edge of the cell.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "clip-text",
          "description": "Enable overflow ellipsis",
          "type": "boolean",
          "default": "\"false\""
        }
      ],
      "properties": [
        {
          "name": "disableChildInteraction",
          "attribute": "disable-child-interaction",
          "description": "Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "noPadding",
          "attribute": "no-padding",
          "description": "Remove padding in order to have element going to the edge of the cell.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "clipText",
          "attribute": "clip-text",
          "description": "Enable overflow ellipsis",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null,null]"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "slot for table cell content"
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-table-cell-padding",
          "description": "overwrite the table cell padding"
        },
        {
          "name": "--uui-table-cell-height",
          "description": "overwrite the table cell height"
        }
      ]
    },
    {
      "name": "uui-table-head",
      "path": "./lib/uui-table-head.element.ts",
      "description": "Table head element. Holds the styles for table head. Parent to uui-table-head-cell.",
      "properties": [
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "slot for uui-table-head-cell elements."
        }
      ]
    },
    {
      "name": "uui-table-row",
      "path": "./lib/uui-table-row.element.ts",
      "description": "Table row element with option to set is as selectable. Parent for uui-table-cell. Must be a child of uui-table.",
      "attributes": [
        {
          "name": "select-only",
          "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
          "type": "boolean"
        },
        {
          "name": "selectable",
          "description": "Enable the ability to select this element.",
          "type": "boolean"
        },
        {
          "name": "selected",
          "description": "Attribute applied when the element is selected.",
          "type": "boolean",
          "default": "false"
        }
      ],
      "properties": [
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        },
        {
          "name": "selectOnly",
          "attribute": "select-only",
          "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
          "type": "boolean"
        },
        {
          "name": "selectable",
          "attribute": "selectable",
          "description": "Enable the ability to select this element.",
          "type": "boolean"
        },
        {
          "name": "selected",
          "attribute": "selected",
          "description": "Attribute applied when the element is selected.",
          "type": "boolean",
          "default": "false"
        }
      ],
      "events": [
        {
          "name": "selected",
          "description": "fires when the media card is selected"
        },
        {
          "name": "deselected",
          "description": "fires when the media card is deselected"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "for <uui-table-cell> elements that should be in the row."
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-table-row-color-selected",
          "description": "overwrite the color of the selected row"
        }
      ]
    },
    {
      "name": "uui-table",
      "path": "./lib/uui-table.element.ts",
      "description": "Recreation of native table and it's child elements. `<uui-table>` is a parent element to `<uui-table-head>` `<and uui-table-row>`. To make it fully accessible remember to add aria-label and aria-describedby.",
      "properties": [
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "slot for `<uui-table-head>` and `<uui-table-row>` elements. Make a table out of them."
        }
      ]
    }
  ]
}