Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
row-header //Does the table use the first column as a row header? Default is false.
scroll //Does the table use scrolling to fit when it is too wide? Default is false: a responsive layout where only two columns are shown and a dropdown menu controls which column to display.
sort //Does the table allow sorting by column where column headers become sort buttons? Default is false.
striped> //Does the table have alternating stipes of shading for its body rows? Default is false.
import { displayBehaviors } from "./editable-table-behaviors.js";
import "./editable-table-styles.js";
/**
* `editable-table-display`
* @customElement editable-table-display
* ` An editor interface for editable-table`
* @demo ./demo/editor.html
*
* @polymer
* @appliesMixin displayBehaviors
* @appliesMixin ResponsiveUtilityBehaviors
*/
class EditableTableDisplay extends displayBehaviors(
ResponsiveUtilityBehaviors(PolymerElement)
) {
static get template() {
return html`
<style>
:host .th-or-td {
padding: var(--editable-table-cell-padding);
}
:host([bordered]) .th {
border: 1px solid var(--editable-table-border-color);
}
:host([striped]) .tbody-tr:nth-child(2n) .th,
:host([striped]) .tbody-tr:nth-child(2n) .td {
@apply --editable-table-style-stripe;
}
:host([sort]) thead th,
:host([filter]) tbody td {</style>
row-header //Does the table use the first column as a row header? Default is false.
responsive //Does the table use only two columns are shown and a dropdown menu controls which column to display? Default is false: a responsive layout with scrolling to fit when it is too wide.
sort //Does the table allow sorting by column where column headers become sort buttons? Default is false.
striped> //Does the table have alternating stipes of shading for its body rows? Default is false.