DataTable

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DataTable
  caption="Data table"
  columns="[]"
  rows="[]"
  emptyMessage="No data available."
  striped="false"
/>

Legacy mount name: data-component="DataTable".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DataTable.wrn

component DataTable {
  props {
    caption = "Data table"
    columns = []
    rows = []
    emptyMessage = "No data available."
    striped = false
    class = ""
  }
  view {
        <div class="wire-table-wrap {class}" tabindex="0" role="region" aria-label="{caption}">
        <table class="wire-table {striped ? 'wire-table--striped' : ''}">
        <caption class="wire-visually-hidden">{caption}</caption>
        <thead>
        <tr>{#each columns as column}<th scope="col">{column.label}</th>{/each}</tr>
        </thead>
        <tbody>{#each rows as row}<tr>{#each columns as column}<td>{row[column.key]}</td>{/each}</tr>{:empty}<tr>
        <td colspan="{columns.length}">{emptyMessage}</td>
        </tr>{/each}</tbody>
        </table>
        </div>
    }
}