Tts-table NPM | npm.io

tts-table

Using this component

You need tts-table component and paper-tooltip element. Please check https://webcomponents.org for paper-tooltip.

Include the paper-tooltip element in your index.html. Then put a script tag similar to this for tts-table:

<script src='https://unpkg.com/tts-table/dist/ttstable.js'></script>

or versioned:

<script src='https://unpkg.com/tts-table@0.0.1/dist/ttstable.js'></script>

or node with node modules run:

yarn add tts-table

and add:

<script src='node_modules/my-name/dist/myname.js></script>

...in the head of your index.html. Then you can use the element anywhere in your template, JSX, html etc. Note that some js frameworks might require additional steps to the ones below. Polyfills might also be needed for webcomponents.

Documentation

Properties

// Things you can set as props to the component
@Prop() tableData: TableData;

// One table items datamodel
export interface TableItem {
  startTime: Date | number;
  endTime: Date | number;
  row: number;
  title?: string;
  tooltipData?: Tooltip[];
  highlighted?: boolean;
  disabled?: boolean;
  selected?: boolean;
}

// tooltip datamodel
export interface Tooltip {
  type: string;
  value: string;
}

// A column consists of several items
export type TableColumn = TableItem[];

// A table consists of several columns
export type TableData = TableColumn[];

Events

// you should listen to tableItemSelected event if you want to change the selected item.
@Event() tableItemSelected: EventEmitter;

Please note that you should handle the logic of selecting / adding highlighted / unavailbling the items in the parent component. The logic is delegated because of multi / single selection possibilities. Maybe someone does not want selections at all.

// Here is an example of single seleciton
function setSelectedItem(tableData, selectedItem) {
  return tableData.map(
    columnData => columnData.map(
      tableItem => {
        if (
          tableItem.startTime === selectedItem.startTime &&
          tableItem.endTime === selectedItem.endTime &&
          tableItem.row === selectedItem.row
        ) {
          return Object.assign({}, tableItem, {selected: true})
        }
        return Object.assign({}, tableItem, {selected: false})
      }
    )
  )
}

Styles

tts-table {
  --tts-table-font-family: 'Courier New', monospace;

  --tts-table-column-title-font-size: 16px;
  --tts-table-column-title-font-weight: bold;
  --tts-table-column-width: 240px;
  --tts-table-column-title-padding: 6px;

  --tts-side-column-padding-top: 30px;
  --tts-side-column-font-weight: bold;

  --tts-side-item-color: rgba(16, 16, 16, 0.95);
  --tts-side-item-background-color: transparent;
  --tts-side-item-font-size: 16px;
  --tts-side-item-height: 34px;
  --tts-side-item-margin: 4px 2px;
  --tts-side-item-padding: 9px 0;
  --tts-side-item-border-radius: 2px;

  --tts-table-item-color: rgba(16, 16, 16, 0.95);
  --tts-table-item-background-color: #fafafa;
  --tts-table-item-hover-background-color: #ea80fc;
  --tts-table-item-disabled-background-color: rgba(168, 168, 168, 0.7);
  --tts-table-item-disabled-hover-background-color: rgba(168, 168, 168, 0.7);
  --tts-table-item-selected-background-color: #40c4ff;
  --tts-table-item-highlighted-background-color: #ffea00;
  --tts-table-item-font-size: 14px;
  --tts-table-item-height: 34px;
  --tts-table-item-margin: 4px 2px;
  --tts-table-item-padding: 10px;
  --tts-table-item-border-radius: 2px;

  --tts-tooltip-text-align: center;
  --tts-tooltip-top: 100%;
  --tts-tooltip-cursor: default;
  --tts-tooltip-left: 5%;
  --tts-tooltip-width: 90%;
  --tts-tooltip-padding: 8px;
  --tts-tooltip-z-index: 1;
  --tts-tooltip-font-weight: bold;
  --tts-tooltip-background-color: rgba(222, 222, 222, 0.8);
  --tts-tooltip-border-radius: 0 0 4px 4px;
}