Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
components/table.json
{
"name": "Table",
"tagName": "noora-table",
"elementClassName": "NooraTable",
"className": "noora-table",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Displays structured rows and columns with optional sorting and expansion.",
"usage": "<noora-table>\n <noora-table-column name=\"name\">Name</noora-table-column>\n <noora-table-row row-key=\"tuist\">\n <noora-table-cell column=\"name\">Tuist</noora-table-cell>\n </noora-table-row>\n</noora-table>",
"attributes": [
{
"name": "row-key",
"property": "rowKey",
"type": "string",
"default": "id",
"description": "Selects the property used as each row key."
},
{
"name": "empty-title",
"property": "emptyTitle",
"type": "string",
"default": "No results",
"description": "Sets the empty-state title."
},
{
"name": "selectable",
"property": "selectable",
"type": "boolean",
"default": false,
"description": "Makes rows selectable."
}
],
"properties": [
{
"name": "columns",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"default": [],
"description": "Defines columns programmatically when declarative noora-table-column children are not used."
},
{
"name": "rows",
"type": "json",
"typescriptType": "Record<string, unknown>[]",
"default": [],
"description": "Defines rows programmatically when declarative noora-table-row children are not used."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "Declarative noora-table-column and noora-table-row children."
},
{
"name": "empty",
"description": "A custom empty state."
}
],
"cssParts": [
{
"name": "table",
"description": "The native table."
},
{
"name": "row",
"description": "Each body row."
},
{
"name": "cell",
"description": "Each body cell."
}
],
"events": [
{
"name": "noora-row-select",
"type": "CustomEvent<{ index: number; row: Record<string, unknown> }>",
"description": "Emitted when a selectable row is activated."
}
],
"notes": ["Row activation emits a `noora-row-select` event."],
"examples": [
{
"id": "cell-types",
"title": "Cell types",
"description": "Render text, descriptions, tags, badges, status, actions, and time values as structured columns.",
"markup": "<noora-table>\n <noora-table-column name=\"label\">Text</noora-table-column>\n <noora-table-column name=\"description\">Description</noora-table-column>\n <noora-table-column name=\"tag\">Tag</noora-table-column>\n <noora-table-column name=\"status\">Status</noora-table-column>\n <noora-table-column name=\"createdAt\" format=\"date\">Created at</noora-table-column>\n <noora-table-row row-key=\"1\">\n <noora-table-cell column=\"label\">Row One</noora-table-cell>\n <noora-table-cell column=\"description\">An internal identifier</noora-table-cell>\n <noora-table-cell column=\"tag\">Category</noora-table-cell>\n <noora-table-cell column=\"status\">Success</noora-table-cell>\n <noora-table-cell column=\"createdAt\">2023-01-01T12:00:00Z</noora-table-cell>\n </noora-table-row>\n <noora-table-row row-key=\"2\">\n <noora-table-cell column=\"label\">Row Two</noora-table-cell>\n <noora-table-cell column=\"description\">Another identifier</noora-table-cell>\n <noora-table-cell column=\"tag\">User</noora-table-cell>\n <noora-table-cell column=\"status\">Running</noora-table-cell>\n <noora-table-cell column=\"createdAt\">2023-01-02T12:00:00Z</noora-table-cell>\n </noora-table-row>\n</noora-table>"
},
{
"id": "example",
"title": "Command example",
"description": "Combine common build and test information.",
"markup": "<noora-table>\n <noora-table-column name=\"command\">Command</noora-table-column>\n <noora-table-column name=\"status\">Status</noora-table-column>\n <noora-table-column name=\"ranBy\">Ran by</noora-table-column>\n <noora-table-column name=\"duration\" icon=\"square_rounded_arrow_down\">Duration</noora-table-column>\n <noora-table-column name=\"createdAt\">Created at</noora-table-column>\n <noora-table-row row-key=\"test\">\n <noora-table-cell column=\"command\">test TuistKitAcceptanceTests</noora-table-cell>\n <noora-table-cell column=\"status\">Success</noora-table-cell>\n <noora-table-cell column=\"ranBy\">Continuous integration</noora-table-cell>\n <noora-table-cell column=\"duration\">5 seconds</noora-table-cell>\n <noora-table-cell column=\"createdAt\">2 hours ago</noora-table-cell>\n </noora-table-row>\n</noora-table>"
},
{
"id": "sorting",
"title": "Sortable columns",
"description": "Show ascending and descending sort direction indicators.",
"markup": "<noora-table>\n <noora-table-column name=\"name\">Name</noora-table-column>\n <noora-table-column name=\"duration\" sort-order=\"desc\">Duration (desc)</noora-table-column>\n <noora-table-column name=\"createdAt\" sort-order=\"asc\">Created at (asc)</noora-table-column>\n <noora-table-row row-key=\"1\">\n <noora-table-cell column=\"name\">Row One</noora-table-cell>\n <noora-table-cell column=\"duration\">5s</noora-table-cell>\n <noora-table-cell column=\"createdAt\">2 hours ago</noora-table-cell>\n </noora-table-row>\n <noora-table-row row-key=\"2\">\n <noora-table-cell column=\"name\">Row Two</noora-table-cell>\n <noora-table-cell column=\"duration\">12s</noora-table-cell>\n <noora-table-cell column=\"createdAt\">2 hours ago</noora-table-cell>\n </noora-table-row>\n</noora-table>"
},
{
"id": "selectable-rows",
"title": "Selectable rows",
"description": "Allow rows to emit selection events for detail or expansion workflows.",
"markup": "<noora-table selectable>\n <noora-table-column name=\"task\">Task</noora-table-column>\n <noora-table-column name=\"hit\">Hit</noora-table-column>\n <noora-table-column name=\"type\">Type</noora-table-column>\n <noora-table-row row-key=\"task-1\">\n <noora-table-cell column=\"task\">GeneratedAssetSymbols.swift</noora-table-cell>\n <noora-table-cell column=\"hit\">Remote</noora-table-cell>\n <noora-table-cell column=\"type\">Clang</noora-table-cell>\n </noora-table-row>\n <noora-table-row row-key=\"task-2\">\n <noora-table-cell column=\"task\">CompileSwiftSources.swift</noora-table-cell>\n <noora-table-cell column=\"hit\">Local</noora-table-cell>\n <noora-table-cell column=\"type\">Swift</noora-table-cell>\n </noora-table-row>\n <noora-table-row row-key=\"task-3\">\n <noora-table-cell column=\"task\">LinkBinary</noora-table-cell>\n <noora-table-cell column=\"hit\">Missed</noora-table-cell>\n <noora-table-cell column=\"type\">Clang</noora-table-cell>\n </noora-table-row>\n</noora-table>"
}
]
}