2.0.1 • Published 4 years ago
@chameleon-ds/table v2.0.1
Chameleon Table
import { html } from "@open-wc/demoing-storybook";
import "./chameleon-table.js";
const columns = [
{
header: "Column 1",
row: (row) => html` ${row.field1} `,
},
{
header: "Column 2",
row: (row) => html` ${row.field2} `,
},
{
header: "Column 3",
row: (row) => html` ${row.field3} `,
},
{
header: "Column 4",
headerClass: "right",
columnClass: "right",
row: (row) => html` ${row.field4} `,
},
];
const columnsWithDetailFields = [
{
header: "Column 1",
row: (row) => html` ${row.field1} `,
detailsRow: () => "",
},
{
header: "Column 2",
row: (row) => html` ${row.field2} `,
detailsRow: (detailsRow) => html` ${detailsRow.detailsField2} `,
},
{
header: "Column 3",
row: (row) => html` ${row.field3} `,
detailsRow: (detailsRow) => html` ${detailsRow.detailsField3} `,
},
{
header: "Column 4",
row: (row) => html` ${row.field4} `,
detailsRow: (detailsRow) => html` ${detailsRow.detailsField4} `,
},
];
const columnsWithFilters = [
{
header: "Column 1",
row: (row) => html` ${row.field1} `,
},
{
header: "Column 2",
row: (row) => html` ${row.field2} `,
filter: {
name: "column2",
},
sortable: true,
},
{
header: "Column 3",
row: (row) => html` ${row.field3} `,
filter: {
name: "filterName_column3",
},
searchable: true,
},
{
header: "Column 4",
row: (row) => html` ${row.field4} `,
filter: {
name: "filterName_column4",
items: [
{
value: "filter1",
label: "Filter 1",
},
{
value: "filter2",
label: "Filter 2",
},
{
value: "filter3",
label: "Filter 3",
},
],
},
searchable: true,
sortable: true,
},
];
const rows = [
{
field1: "Row 1 - Field 1",
field2: "Row 1 - Field 2",
field3: "Row 1 - Field 3",
field4: "Row 1 - Field 4",
showDetails: false,
details: [
{
detailsField2: "Details Row 1 - Field 2",
detailsField3: "Details Row 1 - Field 3",
detailsField4: "Details Row 1 - Field 4",
},
],
},
{
field1: "Row 2 - Field 1",
field2: "Row 2 - Field 2",
field3: "Row 2 - Field 3",
field4: "Row 2 - Field 4",
showDetails: true,
details: [
{
detailsField2: "Details Row 1 - Field 2",
detailsField3: "Details Row 1 - Field 3",
detailsField4: "Details Row 1 - Field 4",
},
{
detailsField2: "Details Row 2 - Field 2",
detailsField3: "Details Row 2 - Field 3",
detailsField4: "Details Row 2 - Field 4",
},
{
detailsField2: "Details Row 3 - Field 2",
detailsField3: "Details Row 3 - Field 3",
detailsField4: "Details Row 3 - Field 4",
},
],
},
{
field1: "Row 3 - Field 1",
field2: "Row 3 - Field 2",
field3: "Row 3 - Field 3",
field4: "Row 3 - Field 4",
showDetails: true,
details: [],
},
{
field1: "Row 4 - Field 1",
field2: "Row 4 - Field 2",
field3: "Row 4 - Field 3",
field4: "Row 4 - Field 4",
showDetails: true,
details: [
{
detailsField2: "Details Row 1 - Field 2",
detailsField3: "Details Row 1 - Field 3",
detailsField4: "Details Row 1 - Field 4",
},
{
detailsField2: "Details Row 2 - Field 2",
detailsField3: "Details Row 2 - Field 3",
detailsField4: "Details Row 2 - Field 4",
},
{
detailsField2: "Details Row 3 - Field 2",
detailsField3: "Details Row 3 - Field 3",
detailsField4: "Details Row 3 - Field 4",
},
{
detailsField2: "Details Row 4 - Field 2",
detailsField3: "Details Row 4 - Field 3",
detailsField4: "Details Row 4 - Field 4",
},
],
},
{
field1: "Row 5 - Field 1",
field2: "Row 5 - Field 2",
field3: "Row 5 - Field 3",
field4: "Row 5 - Field 4",
},
{
field1: "Row 6 - Field 1",
field2: "Row 6 - Field 2",
field3: "Row 6 - Field 3",
field4: "Row 6 - Field 4",
},
{
field1: "Row 7 - Field 1",
field2: "Row 7 - Field 2",
field3: "Row 7 - Field 3",
field4: "Row 7 - Field 4",
},
];
const pageSize = 6;
const currentPage = 1;
const totalItems = 7;
export default {
title: "Components|Data and Visualizations/Table",
component: "chameleon-table",
options: { selectedPanel: "storybookjs/docs/panel" },
};
Properties
Property Name | Type(s) | Default Value | Description |
---|---|---|---|
columns | Array | [] | An array of TemplateResults to display in the table headers |
rows | Array | [] | An array of TemplateResults to display in the table |
highlightRow | Number | null | The table's highlighted row |
filters | Object | {} | The table's filters |
sort | Object | orderBy: "", order: "ASC" | The table's sort object |
pageSize | Number | 10 | The total number of pages in the table |
totalItems | Number | 0 | The total items in the table |
currentPage | Number | 1 | The current page of the table |
hidePagination | Boolean | false | When true, hides the table's pagination |
Examples
Default
export const Default = () => html`
<chameleon-table
.columns=${columns}
.rows=${rows}
.pageSize=${pageSize}
.currentPage=${currentPage}
.totalItems=${totalItems}
></chameleon-table>
`;
Detail Rows
export const DetailRows = () => html`
<chameleon-table
.columns=${columnsWithDetailFields}
.rows=${rows}
.pageSize=${pageSize}
.currentPage=${currentPage}
.totalItems=${totalItems}
></chameleon-table>
`;
Filters
export const Filters = () => html`
<chameleon-table
.columns=${columnsWithFilters}
.rows=${rows}
.pageSize=${pageSize}
.currentPage=${currentPage}
.totalItems=${totalItems}
></chameleon-table>
`;
2.0.1
4 years ago
2.0.0
4 years ago
1.1.7
4 years ago
1.1.6
4 years ago
1.1.5
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.3
4 years ago
0.7.0
4 years ago
0.6.0
4 years ago
0.5.0
4 years ago
0.4.3
4 years ago
0.4.2
4 years ago
0.4.1
4 years ago
0.4.0
4 years ago
0.3.0
4 years ago
0.2.8
4 years ago
0.3.1
4 years ago
0.2.7
4 years ago
0.2.6
4 years ago
0.2.5
4 years ago
0.2.4
4 years ago
0.2.3
4 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago