Table Wrapper

<wa-table-wrapper> Experimental Since 3.0

Table Wrapper can be used to extend a simple Table with interactive functions

First Column Second Column Thrid Column
Hello 200 Alpha 3
Hello 20 Gamma 40
Hello 1 Delta 15
Hello Zeta 4 
<wa-table-wrapper searchable sortable>
  <table>
    <thead>
        <tr>
            <th>First Column</th>
            <th>Second Column</th>
            <th>Thrid Column</th>
        </tr>
    </thead>

    <tbody>
        <tr>
          <td>Hello 200</td>
          <td>Alpha</td>
          <td>3</td>
        </tr>
        <tr>
          <td>Hello 20</td>
          <td>Gamma</td>
          <td>40</td>
        </tr>
        <tr>
          <td>Hello 1</td>
          <td>Delta</td>
          <td>15</td>
        </tr>
        <tr>
          <td>Hello</td>
          <td>Zeta</td>
          <td>4</td>
        </tr>
    </tbody>
  </table>
</wa-table-wrapper>

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN npm Self-Hosted React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.14.0/components/table-wrapper/table-wrapper.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/table-wrapper/table-wrapper.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/table-wrapper/table-wrapper.js';

To import this component for React 18 or below, use the following code:

import WaTableWrapper from '@awesome.me/webawesome/dist/react/table-wrapper/index.js';

Slots

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

CSS parts

Learn more about CSS parts.

Dependencies

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Need a hand? Report a bug Ask for help
    No results