Table Wrapper

<wa-table-wrapper> Since 3.0 experimental

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>

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.

Importing

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.

To manually import this component from NPM, use the following code. 

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

To manually import this component from React, use the following code. 

import WaTableWrapper from '@awesome.me/webawesome/dist/react/table-wrapper';
Need a hand? Report a bug Ask for help
    No results