@cxl/ui-table

UI Table Components

Project Details

• Branch Version: 0.1.0
• License: GPL-3.0
• Documentation: Link
• Report Issues: Github

Installation

npm install @cxl/ui-table

Usage

Static Table

<cxl-table>
	<cxl-tr>
		<cxl-th>Name</cxl-th>
		<cxl-th>Tag Name</cxl-th>
		<cxl-th>Role</cxl-th>
		<cxl-th>Kind</cxl-th>
		<cxl-th>Flags</cxl-th>
		<cxl-th>Link</cxl-th>
	</cxl-tr>
	<cxl-tr>
		<cxl-td>alert</cxl-td>
		<cxl-td></cxl-td>
		<cxl-td></cxl-td>
		<cxl-td>16</cxl-td>
		<cxl-td>1</cxl-td>
		<cxl-td><a target="_top" href="../ui/?undefined">Docs</a></cxl-td>
	</cxl-tr><cxl-tr>
		<cxl-td>Appbar</cxl-td>
		<cxl-td>cxl-appbar</cxl-td>
		<cxl-td>heading</cxl-td>
		<cxl-td>35</cxl-td>
		<cxl-td>1</cxl-td>
		<cxl-td><a target="_top" href="../ui/?undefined">Docs</a></cxl-td>
	</cxl-tr><cxl-tr>
		<cxl-td>AppbarContextual</cxl-td>
		<cxl-td>cxl-appbar-contextual</cxl-td>
		<cxl-td></cxl-td>
		<cxl-td>35</cxl-td>
		<cxl-td>1</cxl-td>
		<cxl-td><a target="_top" href="../ui/?undefined">Docs</a></cxl-td>
	</cxl-tr><cxl-tr>
		<cxl-td>AppbarSearch</cxl-td>
		<cxl-td>cxl-appbar-search</cxl-td>
		<cxl-td></cxl-td>
		<cxl-td>35</cxl-td>
		<cxl-td>1</cxl-td>
		<cxl-td><a target="_top" href="../ui/?undefined">Docs</a></cxl-td>
	</cxl-tr><cxl-tr>
		<cxl-td>AppbarTitle</cxl-td>
		<cxl-td>cxl-appbar-title</cxl-td>
		<cxl-td></cxl-td>
		<cxl-td>35</cxl-td>
		<cxl-td>1</cxl-td>
		<cxl-td><a target="_top" href="../ui/?undefined">Docs</a></cxl-td>
	</cxl-tr>
</cxl-table>

DataTable with Static Rows

<cxl-datatable id="table">
	<cxl-tr>
		<cxl-th>
			<cxl-table-select-all></cxl-table-select-all>
		</cxl-th>
		<cxl-th sortable sort="asc" field="name">Name</cxl-th>
		<cxl-th sortable field="tagName">Tag Name</cxl-th>
		<cxl-th sortable field="role">Role</cxl-th>
		<cxl-th>Kind</cxl-th>
		<cxl-th>Flags</cxl-th>
		<cxl-th>Link</cxl-th>
	</cxl-tr>
	<cxl-table-source id="tbody"></cxl-table-source>
	<cxl-table-pagination slot="footer"></cxl-table-pagination>
</cxl-datatable>
<script>
	(async () => {
		const data = (
			await fetch('summary.json').then(res => res.json())
		).map(r => ({
			name: r.name,
			tagName: r.docs?.tagName || '',
			role: r.docs?.role || '',
			kind: r.kind,
			flags: r.flags,
		}));
		const tbody = document.getElementById('tbody');

		function renderRow(row) {
			const tr = document.createElement('cxl-tr-selectable');
			tr.value = row;
			tr.innerHTML = `
				<cxl-td>${row.name}</cxl-td>
				<cxl-td>${row.tagName}</cxl-td>
				<cxl-td>${row.role}</cxl-td>
				<cxl-td>${row.kind}</cxl-td>
				<cxl-td>${row.flags}</cxl-td>
				<cxl-td><a target="_top" href="../ui/?${row.href}">Docs</a></cxl-td>
			`;
			return tr;
		}

		for (const row of data) tbody.appendChild(renderRow(row));
	})();
</script>

Dynamic Table

<cxl-dataset id="table">
	<cxl-table>
		<cxl-tr>
			<cxl-th>
				<cxl-table-select-all></cxl-table-select-all>
			</cxl-th>
			<cxl-th sortable sort="asc" field="name">Name</cxl-th>
			<cxl-th sortable field="tagName">Tag Name</cxl-th>
			<cxl-th sortable field="role">Role</cxl-th>
			<cxl-th>Kind</cxl-th>
			<cxl-th>Flags</cxl-th>
			<cxl-th>Link</cxl-th>
		</cxl-tr>
		<cxl-tbody id="tbody"></cxl-tbody>
	</cxl-table>
	<cxl-table-pagination></cxl-table-pagination>
</cxl-dataset>
<script>
	(async () => {
		const data = (
			await fetch('summary.json').then(res => res.json())
		).map(r => ({
			name: r.name,
			tagName: r.docs?.tagName || '',
			role: r.docs?.role || '',
			kind: r.kind,
			flags: r.flags,
		}));
		const tbody = document.getElementById('tbody');

		function renderRow(row) {
			const tr = document.createElement('cxl-tr-selectable');
			tr.value = row;
			tr.innerHTML = `
				<cxl-td>${row.name}</cxl-td>
				<cxl-td>${row.tagName}</cxl-td>
				<cxl-td>${row.role}</cxl-td>
				<cxl-td>${row.kind}</cxl-td>
				<cxl-td>${row.flags}</cxl-td>
				<cxl-td><a target="_top" href="../ui/?${row.href}">Docs</a></cxl-td>
			`;
			return tr;
		}

		table.addEventListener('change', ev => {
			const data = table.value;
			tbody.innerHTML = '';
			for (const row of data) tbody.appendChild(renderRow(row));
		});

		table.source = data;
	})();
</script>