Table

<diwa-table caption="Team members">
  <diwa-table-head>
    <diwa-table-row>
      <diwa-table-head-cell>Name</diwa-table-head-cell>
      <diwa-table-head-cell>Role</diwa-table-head-cell>
      <diwa-table-head-cell>Department</diwa-table-head-cell>
      <diwa-table-head-cell>Status</diwa-table-head-cell>
      <diwa-table-head-cell>Joined</diwa-table-head-cell>
    </diwa-table-row>
  </diwa-table-head>
  <diwa-table-body>
    <diwa-table-row>
      <diwa-table-cell>Alice Chen</diwa-table-cell>
      <diwa-table-cell>Product Designer</diwa-table-cell>
      <diwa-table-cell>Design</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2022-03</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Bob Kumar</diwa-table-cell>
      <diwa-table-cell>Frontend Engineer</diwa-table-cell>
      <diwa-table-cell>Engineering</diwa-table-cell>
      <diwa-table-cell>Away</diwa-table-cell>
      <diwa-table-cell>2021-07</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Carlos Silva</diwa-table-cell>
      <diwa-table-cell>Backend Engineer</diwa-table-cell>
      <diwa-table-cell>Engineering</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2023-01</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Diana Müller</diwa-table-cell>
      <diwa-table-cell>QA Engineer</diwa-table-cell>
      <diwa-table-cell>Quality</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2022-11</diwa-table-cell>
    </diwa-table-row>
  </diwa-table-body>
</diwa-table>

<diwa-table caption="Team members" compact>
  <diwa-table-head>
    <diwa-table-row>
      <diwa-table-head-cell>Name</diwa-table-head-cell>
      <diwa-table-head-cell>Role</diwa-table-head-cell>
      <diwa-table-head-cell>Department</diwa-table-head-cell>
      <diwa-table-head-cell>Status</diwa-table-head-cell>
      <diwa-table-head-cell>Joined</diwa-table-head-cell>
    </diwa-table-row>
  </diwa-table-head>
  <diwa-table-body>
    <diwa-table-row>
      <diwa-table-cell>Alice Chen</diwa-table-cell>
      <diwa-table-cell>Product Designer</diwa-table-cell>
      <diwa-table-cell>Design</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2022-03</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Bob Kumar</diwa-table-cell>
      <diwa-table-cell>Frontend Engineer</diwa-table-cell>
      <diwa-table-cell>Engineering</diwa-table-cell>
      <diwa-table-cell>Away</diwa-table-cell>
      <diwa-table-cell>2021-07</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Carlos Silva</diwa-table-cell>
      <diwa-table-cell>Backend Engineer</diwa-table-cell>
      <diwa-table-cell>Engineering</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2023-01</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Diana Müller</diwa-table-cell>
      <diwa-table-cell>QA Engineer</diwa-table-cell>
      <diwa-table-cell>Quality</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2022-11</diwa-table-cell>
    </diwa-table-row>
  </diwa-table-body>
</diwa-table>

<diwa-table caption="Team members" bordered>
  <diwa-table-head>
    <diwa-table-row>
      <diwa-table-head-cell>Name</diwa-table-head-cell>
      <diwa-table-head-cell>Role</diwa-table-head-cell>
      <diwa-table-head-cell>Department</diwa-table-head-cell>
      <diwa-table-head-cell>Status</diwa-table-head-cell>
      <diwa-table-head-cell>Joined</diwa-table-head-cell>
    </diwa-table-row>
  </diwa-table-head>
  <diwa-table-body>
    <diwa-table-row>
      <diwa-table-cell>Alice Chen</diwa-table-cell>
      <diwa-table-cell>Product Designer</diwa-table-cell>
      <diwa-table-cell>Design</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2022-03</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Bob Kumar</diwa-table-cell>
      <diwa-table-cell>Frontend Engineer</diwa-table-cell>
      <diwa-table-cell>Engineering</diwa-table-cell>
      <diwa-table-cell>Away</diwa-table-cell>
      <diwa-table-cell>2021-07</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Carlos Silva</diwa-table-cell>
      <diwa-table-cell>Backend Engineer</diwa-table-cell>
      <diwa-table-cell>Engineering</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2023-01</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Diana Müller</diwa-table-cell>
      <diwa-table-cell>QA Engineer</diwa-table-cell>
      <diwa-table-cell>Quality</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2022-11</diwa-table-cell>
    </diwa-table-row>
  </diwa-table-body>
</diwa-table>

<diwa-table caption="Team members" striped>
  <diwa-table-head>
    <diwa-table-row>
      <diwa-table-head-cell>Name</diwa-table-head-cell>
      <diwa-table-head-cell>Role</diwa-table-head-cell>
      <diwa-table-head-cell>Department</diwa-table-head-cell>
      <diwa-table-head-cell>Status</diwa-table-head-cell>
      <diwa-table-head-cell>Joined</diwa-table-head-cell>
    </diwa-table-row>
  </diwa-table-head>
  <diwa-table-body>
    <diwa-table-row>
      <diwa-table-cell>Alice Chen</diwa-table-cell>
      <diwa-table-cell>Product Designer</diwa-table-cell>
      <diwa-table-cell>Design</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2022-03</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Bob Kumar</diwa-table-cell>
      <diwa-table-cell>Frontend Engineer</diwa-table-cell>
      <diwa-table-cell>Engineering</diwa-table-cell>
      <diwa-table-cell>Away</diwa-table-cell>
      <diwa-table-cell>2021-07</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Carlos Silva</diwa-table-cell>
      <diwa-table-cell>Backend Engineer</diwa-table-cell>
      <diwa-table-cell>Engineering</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2023-01</diwa-table-cell>
    </diwa-table-row>
    <diwa-table-row>
      <diwa-table-cell>Diana Müller</diwa-table-cell>
      <diwa-table-cell>QA Engineer</diwa-table-cell>
      <diwa-table-cell>Quality</diwa-table-cell>
      <diwa-table-cell>Active</diwa-table-cell>
      <diwa-table-cell>2022-11</diwa-table-cell>
    </diwa-table-row>
  </diwa-table-body>
</diwa-table>

<diwa-table id="table" caption="Team members">
  <diwa-table-head>
    <diwa-table-row>
      <diwa-table-head-cell id="col-name">Name</diwa-table-head-cell>
      <diwa-table-head-cell>Role</diwa-table-head-cell>
      <diwa-table-head-cell>Department</diwa-table-head-cell>
      <diwa-table-head-cell>Status</diwa-table-head-cell>
      <diwa-table-head-cell id="col-joined">Joined</diwa-table-head-cell>
    </diwa-table-row>
  </diwa-table-head>
  <diwa-table-body id="tbody"></diwa-table-body>
</diwa-table>
<script>
  const DATA = [
    { name: 'Alice Chen', role: 'Product Designer', dept: 'Design', status: 'Active', joined: '2022-03' },
    { name: 'Bob Kumar', role: 'Frontend Engineer', dept: 'Engineering', status: 'Away', joined: '2021-07' },
    { name: 'Carlos Silva', role: 'Backend Engineer', dept: 'Engineering', status: 'Active', joined: '2023-01' },
    { name: 'Diana Müller', role: 'QA Engineer', dept: 'Quality', status: 'Active', joined: '2022-11' },
  ];
  const colName = document.querySelector('#col-name');
  const colJoined = document.querySelector('#col-joined');
  let sortId = null, sortDir = 'asc';

  function render() {
    const sorted = [...DATA].sort((a, b) => {
      if (!sortId) return 0;
      const key = sortId === 'name' ? 'name' : 'joined';
      return sortDir === 'asc' ? a[key].localeCompare(b[key]) : b[key].localeCompare(a[key]);
    });
    document.querySelector('#tbody').innerHTML = sorted.map((m) =>
      `<diwa-table-row>
        <diwa-table-cell>${m.name}</diwa-table-cell>
        <diwa-table-cell>${m.role}</diwa-table-cell>
        <diwa-table-cell>${m.dept}</diwa-table-cell>
        <diwa-table-cell>${m.status}</diwa-table-cell>
        <diwa-table-cell>${m.joined}</diwa-table-cell>
      </diwa-table-row>`
    ).join('');
    colName.sort = { id: 'name', active: sortId === 'name', direction: sortId === 'name' ? sortDir : 'asc' };
    colJoined.sort = { id: 'joined', active: sortId === 'joined', direction: sortId === 'joined' ? sortDir : 'asc' };
  }

  document.querySelector('#table').addEventListener('update', (e) => {
    sortId = e.detail.id;
    sortDir = e.detail.direction;
    render();
  });
  render();
</script>