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>
`;