Tables

Table example

Table with static html. Click on headers to change sort

Name	Breed	Gender	Age
Luna	Domestic Shorthair	Female	11
Elise	Domestic Longhair	Female	12
Pig	Domestic Shorthair	Female	8
Crackers	Maine Coon	Male	5
Zuma	Ragdoll	Male	8

<mc-table>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Breed</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Luna</td>
        <td>Domestic Shorthair</td>
        <td>Female</td>
        <td>11</td>
      </tr>
      <tr>
        <td>Elise</td>
        <td>Domestic Longhair</td>
        <td>Female</td>
        <td>12</td>
      </tr>
      ...
    </tbody>
  </table>

  <!--
    mc-table-pagination is optional
    mc-table-pagination[sizes] - Comma separated list of rows to show per page
    mc-table-pagination[size] - default amount of rows to show per page

    mc-table-pagination[total] - (Set) Used to show page item count info
    mc-table-pagination[total] - (Not set) Page item count will not display and there will be no last page button
  -->
  <mc-table-pagination
    sizes="5,10"
    size="5"
    total="8"
  ></mc-table-pagination>
</mc-table>

<!-- Optional sort attributes -->
<mc-table sort="Name" direction="ascending">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <!-- you can set an alternate property name or use the text -->
        <th property="breed">Breed</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
    ...
    </tbody>
  </table>
</mc-table>

Dynamic async table data

You can dynamically manage table data

Name	Breed	Gender	Age
Bella	Persian	Female	4
Charlie	Sphynx	Male	6
Chloe	Birman	Female	3
Daisy	Turkish Angora	Female	2
Jack	Oriental Shorthair	Male	7

<mc-table id="tableasync" select sort="name" async>
  <table>
    <thead>
      <tr>
        <th property="name">Name</th>
        <th property="breed">Breed</th>
        <th property="gender">Gender</th>
        <th property="age">Age</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <mc-table-pagination sizes="5,10" size="5"></mc-table-pagination>
</mc-table>

let table = document.querySelector('#tableasync');
table.addEventListener('sort', onPageOrSort);
table.addEventListener('page', onPageOrSort);


function onPageOrSort(event) {
  handleTableData({
    page: event.target.page,
    pageSize: event.target.pageSize,
    sort: event.target.sort,
    direction: event.target.direction
  });
}

async function handleTableData(listFilter = {
  page: 0,
  pageSize: 5,
  sort: 'id',
  direction: 'ascending'
}) {
  // show progress indicator and lock interactions
  table.loading();
  let data = await getData();
  table.rowData = data;
  table.resolveLoading();
}


async function getData() {
  ...
  /*
    [{
      name: 'Zuna',
      breed: 'Ragdoll',
      gender: 'male',
      age: 5
    }]
  */
}

Table with selectable rows

Adding a checkbox is option, if you do not add one to the html then the checkboxes will be inserted as the first column

Name	Breed	Gender	Age
Luna	Domestic Shorthair	Female	11
Elise	Domestic Longhair	Female	12
Pig	Domestic Shorthair	Female	8
Crackers	Maine Coon	Male	5
Zuma	Ragdoll	Male	8

<!-- Select will auto insert checkboxes as the first column -->
<mc-table>
  <table select onchange="console.log(this.value)">
    <thead>
      <tr>
        <th>Name</th>
        <th>Breed</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr value="Luna">
        <td>Luna</td>
        <td>Domestic Shorthair</td>
        <td>Female</td>
        <td>11</td>
      </tr>
      <tr value="Elise">
        <td>Elise</td>
        <td>Domestic Longhair</td>
        <td>Female</td>
        <td>12</td>
      </tr>
      ...
    </tbody>
  </table>
  <mc-table-pagination sizes="5,10" size="5"></mc-table-pagination>
</mc-table>


<!-- Place checkboxes on the right -->
<mc-table>
  <table select onchange="console.log(this.value)">
    <thead>
      <tr>
        <th>Name</th>
        <th>Breed</th>
        <th>Gender</th>
        <th>Age</th>
        <th><mc-checkbox></mc-checkbox></th>
      </tr>
    </thead>
    <tbody>
      <tr value="Luna">
        <td>Luna</td>
        <td>Domestic Shorthair</td>
        <td>Female</td>
        <td>11</td>
        <td><mc-checkbox></mc-checkbox></td>
      </tr>
      <tr value="Elise">
        <td>Elise</td>
        <td>Domestic Longhair</td>
        <td>Female</td>
        <td>12</td>
        <td><mc-checkbox></mc-checkbox></td>
      </tr>
      ...
    </tbody>
  </table>
  <mc-table-pagination sizes="5,10" size="5"></mc-table-pagination>
</mc-table>