{
"version": 2,
"tags": [
{
"name": "fc-sort-control",
"description": "Provides a box with a search input and a scrollable div\nwith checkboxes derived from the given objects",
"jsDoc": "/**\n * Provides a box with a search input and a scrollable div\n * with checkboxes derived from the given objects\n * @element fc-sort-control\n * @fires sort\n */",
"attributes": [
{
"name": "objects",
"description": "The objects to display",
"jsDoc": "/**\n * The objects to display\n * @type {Array}\n * @attr\n */",
"type": "any[]"
},
{
"name": "searchText",
"description": "The text inside the search box",
"jsDoc": "/**\n * The text inside the search box\n * @type {string}\n */",
"type": "string"
}
],
"properties": [
{
"name": "objects",
"description": "The objects to display",
"jsDoc": "/**\n * The objects to display\n * @type {Array}\n * @attr\n */",
"type": "any[]"
},
{
"name": "searchText",
"description": "The text inside the search box",
"jsDoc": "/**\n * The text inside the search box\n * @type {string}\n */",
"type": "string"
}
],
"events": [
{
"name": "change"
},
{
"name": "sort"
}
]
},
{
"name": "fc-sort-control",
"description": "Provides a binary \"Ascending/Descending\" control for sortable tables.",
"jsDoc": "/**\n * Provides a binary \"Ascending/Descending\" control for sortable tables.\n * @element fc-sort-control\n * @fires sort\n */",
"attributes": [
{
"name": "direction",
"description": "The current sort direction",
"jsDoc": "/**\n * The current sort direction\n * @type {'asc'|'desc'|'none'}\n * @attr\n */",
"type": "\"asc\" | \"desc\" | \"none\""
},
{
"name": "level",
"description": "The sort level that will be displayed in a label",
"jsDoc": "/**\n * The sort level that will be displayed in a label\n * @type {Number}\n * @attr\n */",
"type": "number"
},
{
"name": "prevent-secondary-sort",
"description": "Whether or not multiple column sort is enabled. example: `true`",
"jsDoc": "/**\n * Whether or not multiple column sort is enabled. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
}
],
"properties": [
{
"name": "direction",
"description": "The current sort direction",
"jsDoc": "/**\n * The current sort direction\n * @type {'asc'|'desc'|'none'}\n * @attr\n */",
"type": "\"asc\" | \"desc\" | \"none\""
},
{
"name": "level",
"description": "The sort level that will be displayed in a label",
"jsDoc": "/**\n * The sort level that will be displayed in a label\n * @type {Number}\n * @attr\n */",
"type": "number"
},
{
"name": "preventSecondarySort",
"description": "Whether or not multiple column sort is enabled. example: `true`",
"jsDoc": "/**\n * Whether or not multiple column sort is enabled. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "asc",
"description": "The ascending control",
"jsDoc": "/**\n * The ascending control\n * @type {HTMLInputElement}\n */",
"type": "HTMLInputElement"
},
{
"name": "desc",
"description": "The descending control",
"jsDoc": "/**\n * The descending control\n * @type {HTMLInputElement}\n */",
"type": "HTMLInputElement"
},
{
"name": "checked",
"description": "The control for the selected direction",
"jsDoc": "/**\n * The control for the selected direction\n * @type {HTMLInputElement}\n */",
"type": "HTMLInputElement"
}
],
"events": [
{
"name": "sort"
}
]
},
{
"name": "fc-table",
"description": "A table accepting rows and columns. Rows represent actual data, columns describe the data types in the table.\n\n\n## Usage\n\n```html\n\n\n\n Export
\n\n```\n\n## Examples\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n Export
\n\n\n\n\n\n\n\n\n\n\n * \n\n\n```",
"jsDoc": "/**\n * A table accepting rows and columns. Rows represent actual data, columns describe the data types in the table.\n * \n *\n * ## Usage\n *\n * ```html\n * \n *\n * \n * Export
\n * \n * ```\n *\n * ## Examples\n *\n * ```html\n * \n * \n *\n * \n * \n * \n *\n * \n * \n * \n *\n * \n * \n * Export
\n * \n *\n * \n * \n * \n *\n * \n * \n * \n *\n * * \n * \n * \n *```\n *\n * @element fc-table\n *\n * @cssprop --fc-table-padding - default: `0`\n * @cssprop --fc-table-header-cell-padding - default: `10px 25px`\n * @cssprop --fc-table-min-col-width - default: `100px`\n * @cssprop --fc-table-background - default: `white`\n * @cssprop --fc-table-zebra-color - default: `#f8f9fa`\n * @cssprop --fc-table-cell-padding - default: `15px 25px`\n * @fires sort-table - `{ column: Number, direction: 'asc'|'desc' }`\n * @fires row-selected - `{ selected: Row }`\n * @fires table-action - `{ columnIndex: Number, rowIndex: Number, index: Number }`\n * @fires row-action - `{ rowIndex: Number, actionName: String }`\n * @fires column-change - `{ actionType: String }`\n *\n */",
"attributes": [
{
"name": "renderers",
"description": "Custom renderer class. Used in custom columns",
"jsDoc": "/**\n * Custom renderer class. Used in custom columns\n * @type {any}\n * @prop\n * @example class Renderers {\n static cellWithIndex({ cellData, rowIndex }) {\n return `The ${cellData} is at row number ${rowIndex + 1}.`;\n }\n }\n */",
"type": "any"
},
{
"name": "columns",
"description": "Column descriptors. example: `[{ \"label\": \"Text Column\", \"fromKey\": \"textData\", \"type\": \"TEXT\" }, { \"label\": \"Date Column\", \"fromKey\": \"dateData\", \"type\": \"DATE\" },{ \"label\": \"Icon Column\", \"fromKey\": \"iconData\", \"type\": \"ICON\" }]`",
"jsDoc": "/**\n * Column descriptors. example: `[{ \"label\": \"Text Column\", \"fromKey\": \"textData\", \"type\": \"TEXT\" }, { \"label\": \"Date Column\", \"fromKey\": \"dateData\", \"type\": \"DATE\" },{ \"label\": \"Icon Column\", \"fromKey\": \"iconData\", \"type\": \"ICON\" }]`\n * @type {Column[]}\n * @prop\n */",
"type": "any[]"
},
{
"name": "rows",
"description": "Row Descriptors. example: `[{\"textData\": \"Some Long Text Data\",\"dateData\": 1557834321063,\"iconData\": { \"icon\": \"3dots\" }}]`;",
"jsDoc": "/**\n * Row Descriptors. example: `[{\"textData\": \"Some Long Text Data\",\"dateData\": 1557834321063,\"iconData\": { \"icon\": \"3dots\" }}]`;\n * @prop\n * @type {Row[]}\n */",
"type": "any[]"
},
{
"name": "translate",
"description": "Whether to translate cells",
"jsDoc": "/**\n * Whether to translate cells\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "escapeNoLocalize",
"description": "Whether to translate cells",
"jsDoc": "/**\n * Whether to translate cells\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "fetching",
"description": "Whether the table is fetching new data",
"jsDoc": "/**\n * Whether the table is fetching new data\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "select",
"description": "Whether selecting rows is enabled.",
"jsDoc": "/**\n * Whether selecting rows is enabled.\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "multi",
"description": "Whether selecting multiple rows is enabled.",
"jsDoc": "/**\n * Whether selecting multiple rows is enabled.\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "row-actions",
"description": "Whether or not the row actions button is enabled",
"jsDoc": "/**\n * Whether or not the row actions button is enabled\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "columns-draggable",
"description": "Whether or not dragging columns is enabled",
"jsDoc": "/**\n * Whether or not dragging columns is enabled\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "zebra",
"description": "Whether or not the row table has a striped pattern on the rows",
"jsDoc": "/**\n * Whether or not the row table has a striped pattern on the rows\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "wrap",
"description": "If table should fit in it's area or should have a scrollbar",
"jsDoc": "/**\n * If table should fit in it's area or should have a scrollbar\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "hide-column-options",
"description": "Whether or not to display the column options button. example: `true`",
"jsDoc": "/**\n * Whether or not to display the column options button. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "hide-column-save-buttons",
"description": "Whether or not to display the column save buttons. example: `true`",
"jsDoc": "/**\n * Whether or not to display the column save buttons. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "prevent-secondary-sort",
"description": "Whether or not multiple column sort is enabled. example: `true`",
"jsDoc": "/**\n * Whether or not multiple column sort is enabled. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "editing",
"description": "Whether or not grid support editing of a selected row. example: `true`",
"jsDoc": "/**\n * Whether or not grid support editing of a selected row. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "editable",
"description": "Whether or not to show create button for editing. example: `true`",
"jsDoc": "/**\n * Whether or not to show create button for editing. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "removable",
"description": "Whether or not to show delete button. example: `true`",
"jsDoc": "/**\n * Whether or not to show delete button. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "row-limit",
"description": "Whether or not to show create button for editing. example: `10`",
"jsDoc": "/**\n * Whether or not to show create button for editing. example: `10`\n * @type {Number}\n * @attr\n */",
"type": "number"
},
{
"name": "hide-footer",
"description": "Whether or not to show the footer. example: `true`",
"jsDoc": "/**\n * Whether or not to show the footer. example: `true`\n * @type {boolean}\n */",
"type": "boolean"
},
{
"name": "compact-cells",
"description": "Whether or not to make the cells of the table compact (with white space wrapping). example: `true`",
"jsDoc": "/**\n * Whether or not to make the cells of the table compact (with white space wrapping). example: `true`\n * @type {boolean}\n */",
"type": "boolean"
},
{
"name": "loading",
"type": "\"\" | TemplateResult"
},
{
"name": "columns-removable",
"type": "\"\" | TemplateResult"
}
],
"properties": [
{
"name": "renderers",
"description": "Custom renderer class. Used in custom columns",
"jsDoc": "/**\n * Custom renderer class. Used in custom columns\n * @type {any}\n * @prop\n * @example class Renderers {\n static cellWithIndex({ cellData, rowIndex }) {\n return `The ${cellData} is at row number ${rowIndex + 1}.`;\n }\n }\n */",
"type": "any"
},
{
"name": "columns",
"description": "Column descriptors. example: `[{ \"label\": \"Text Column\", \"fromKey\": \"textData\", \"type\": \"TEXT\" }, { \"label\": \"Date Column\", \"fromKey\": \"dateData\", \"type\": \"DATE\" },{ \"label\": \"Icon Column\", \"fromKey\": \"iconData\", \"type\": \"ICON\" }]`",
"jsDoc": "/**\n * Column descriptors. example: `[{ \"label\": \"Text Column\", \"fromKey\": \"textData\", \"type\": \"TEXT\" }, { \"label\": \"Date Column\", \"fromKey\": \"dateData\", \"type\": \"DATE\" },{ \"label\": \"Icon Column\", \"fromKey\": \"iconData\", \"type\": \"ICON\" }]`\n * @type {Column[]}\n * @prop\n */",
"type": "any[]"
},
{
"name": "rows",
"description": "Row Descriptors. example: `[{\"textData\": \"Some Long Text Data\",\"dateData\": 1557834321063,\"iconData\": { \"icon\": \"3dots\" }}]`;",
"jsDoc": "/**\n * Row Descriptors. example: `[{\"textData\": \"Some Long Text Data\",\"dateData\": 1557834321063,\"iconData\": { \"icon\": \"3dots\" }}]`;\n * @prop\n * @type {Row[]}\n */",
"type": "any[]"
},
{
"name": "translate",
"description": "Whether to translate cells",
"jsDoc": "/**\n * Whether to translate cells\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "escapeNoLocalize",
"description": "Whether to translate cells",
"jsDoc": "/**\n * Whether to translate cells\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "fetching",
"description": "Whether the table is fetching new data",
"jsDoc": "/**\n * Whether the table is fetching new data\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "select",
"description": "Whether selecting rows is enabled.",
"jsDoc": "/**\n * Whether selecting rows is enabled.\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "multi",
"description": "Whether selecting multiple rows is enabled.",
"jsDoc": "/**\n * Whether selecting multiple rows is enabled.\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "rowActions",
"description": "Whether or not the row actions button is enabled",
"jsDoc": "/**\n * Whether or not the row actions button is enabled\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "columnsDraggable",
"description": "Whether or not dragging columns is enabled",
"jsDoc": "/**\n * Whether or not dragging columns is enabled\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "zebra",
"description": "Whether or not the row table has a striped pattern on the rows",
"jsDoc": "/**\n * Whether or not the row table has a striped pattern on the rows\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "wrap",
"description": "If table should fit in it's area or should have a scrollbar",
"jsDoc": "/**\n * If table should fit in it's area or should have a scrollbar\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "hideColumnOptions",
"description": "Whether or not to display the column options button. example: `true`",
"jsDoc": "/**\n * Whether or not to display the column options button. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "hideColumnSaveButtons",
"description": "Whether or not to display the column save buttons. example: `true`",
"jsDoc": "/**\n * Whether or not to display the column save buttons. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "preventSecondarySort",
"description": "Whether or not multiple column sort is enabled. example: `true`",
"jsDoc": "/**\n * Whether or not multiple column sort is enabled. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "editing",
"description": "Whether or not grid support editing of a selected row. example: `true`",
"jsDoc": "/**\n * Whether or not grid support editing of a selected row. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "editable",
"description": "Whether or not to show create button for editing. example: `true`",
"jsDoc": "/**\n * Whether or not to show create button for editing. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "removable",
"description": "Whether or not to show delete button. example: `true`",
"jsDoc": "/**\n * Whether or not to show delete button. example: `true`\n * @type {Boolean}\n * @attr\n */",
"type": "boolean"
},
{
"name": "rowLimit",
"description": "Whether or not to show create button for editing. example: `10`",
"jsDoc": "/**\n * Whether or not to show create button for editing. example: `10`\n * @type {Number}\n * @attr\n */",
"type": "number"
},
{
"name": "hideFooter",
"description": "Whether or not to show the footer. example: `true`",
"jsDoc": "/**\n * Whether or not to show the footer. example: `true`\n * @type {boolean}\n */",
"type": "boolean"
},
{
"name": "compactCells",
"description": "Whether or not to make the cells of the table compact (with white space wrapping). example: `true`",
"jsDoc": "/**\n * Whether or not to make the cells of the table compact (with white space wrapping). example: `true`\n * @type {boolean}\n */",
"type": "boolean"
},
{
"name": "filters",
"type": "never[]"
},
{
"name": "noRows",
"type": "string"
},
{
"name": "loading",
"type": "\"\" | TemplateResult"
},
{
"name": "checked",
"type": "any[]"
},
{
"name": "displayNoData",
"type": "({ loading, rows }: { loading: any; rows: any; }) => TemplateResult"
},
{
"name": "renderNoDataPlaceHolder",
"type": "({ loading, rows, totalColumnsNum }: { loading: any; rows: any; totalColumnsNum: any; }) => TemplateResult"
},
{
"name": "result",
"type": "TemplateResult | null"
},
{
"name": "filterable",
"type": "\"\" | TemplateResult"
},
{
"name": "columnsRemovable",
"type": "\"\" | TemplateResult"
}
],
"events": [
{
"name": "reset-column"
},
{
"name": "table-row-click"
},
{
"name": "column-change",
"description": "`{ actionType: String }`"
},
{
"name": "row-action",
"description": "`{ rowIndex: Number, actionName: String }`"
},
{
"name": "table-action",
"description": "`{ columnIndex: Number, rowIndex: Number, index: Number }`"
},
{
"name": "row-selected",
"description": "`{ selected: Row }`"
},
{
"name": "sort-table",
"description": "`{ column: Number, direction: 'asc'|'desc' }`"
}
],
"cssProperties": [
{
"name": "--fc-table-cell-padding",
"description": "default: `15px 25px`"
},
{
"name": "--fc-table-zebra-color",
"description": "default: `#f8f9fa`"
},
{
"name": "--fc-table-background",
"description": "default: `white`"
},
{
"name": "--fc-table-min-col-width",
"description": "default: `100px`"
},
{
"name": "--fc-table-header-cell-padding",
"description": "default: `10px 25px`"
},
{
"name": "--fc-table-padding",
"description": "default: `0`"
}
]
}
]
}