diff --git a/README.md b/README.md index 06a19e8..f0f2226 100644 --- a/README.md +++ b/README.md @@ -1 +1,22 @@ # tp-table + +Displays a list of items in a interactive table. + +## Defining columns + +The `columns` property is an array of objects that define the columns of the table. + +Each column object has the following properties: + +- `label`: The label of the column. +- `name`: The name of the column. This is the property name within the item object that is currently being displayed. +- `width`: The width of the column in pixels. Should be a string like `100px`. +- `required`: Whether the column is required. Required columns are always visible. +- `visible`: Whether the column is visible by default. +- `sortable`: Whether the column is sortable. + +## Custom table elements + +To override the default table column headers you can override the `renderColumnHeader(column, idx)` method. + +To override the default cell elements you can override the `renderItem(item, idx, columns, selected)` method. diff --git a/package.json b/package.json index 9a1080d..580dc51 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tp/tp-table", - "version": "1.3.1", + "version": "1.3.2", "description": "", "main": "tp-table.js", "scripts": { diff --git a/tp-table-item.js b/tp-table-item.js index ef38440..eba7587 100644 --- a/tp-table-item.js +++ b/tp-table-item.js @@ -6,6 +6,7 @@ Copyright (c) 2021 EDV Wasmeier import '@tp/tp-checkbox/tp-checkbox.js'; import { LitElement, html, css } from 'lit'; import { DomQuery } from '@tp/helpers/dom-query.js'; +import { reach } from '@tp/helpers/reach.js'; /** # ef-base-table-item @@ -98,7 +99,7 @@ class TpTableItem extends BaseElement { } renderColumn(column, item) { - return html`