Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ekateriinal/lit-simple-table
Simple dynamic table component build with Lit.js
https://github.com/ekateriinal/lit-simple-table
dynamic-table lit-component lit-html table-component table-web-component web-components
Last synced: about 1 month ago
JSON representation
Simple dynamic table component build with Lit.js
- Host: GitHub
- URL: https://github.com/ekateriinal/lit-simple-table
- Owner: ekateriinal
- License: bsd-3-clause
- Created: 2024-06-20T14:49:28.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-21T08:55:44.000Z (5 months ago)
- Last Synced: 2024-10-02T06:42:53.788Z (about 1 month ago)
- Topics: dynamic-table, lit-component, lit-html, table-component, table-web-component, web-components
- Language: JavaScript
- Homepage: https://lit.dev/playground/#view-mode=code&gist=5638bc680a41c789017576578363c481
- Size: 608 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simple table component build with Lit
**View Lit Playground:** **[redirect to the playground](https://tinyurl.com/mw6kjdb2)**
---
This repository contains a set of Lit.js components to create accessible and customizable tables. The components included are:
- ``: The main table component that wraps headers and rows.
- ``: The cell component used for both headers and body cells.
- ``: The row component that wraps cells within a table row.
## Components
### ``
A wrapper component for table headers and rows.
**Default slot:**
- `table-cell` and `table-row` components to be used inside.
#### Example:
```html
Header 1
Header 2
Header 3
Data 1
Data 2
Data 3
Data 4
Data 5
Data 6
```
### ``
A cell component for table headers and body cells.
**Properties:**
| Property | Type | Description | Possible Values |
|----------|--------|-----------------------------------------------------|----------------------------------------------|
| `type` | String | Defines the type of the cell. | `'title'`: Used for header cells. |
| | | | `'body'`: Used for regular body cells (default). |
| | | | `'strong'`: Used for bold text in body cells. |
**Example:**
```html
Header 1
Data 1
Strong Data
```
### ``
A wrapper component for table rows. It acts as a wrapper for elements without breaking accessibility and table relationships.
**Example:**
```html
Data 1
Data 2
Data 3
```
This repository was built with the help of the [lit-starter-ts](https://github.com/lit/lit-element-starter-ts) repo.