Editable Table Ready

<style>
  .duet-table-action-row.content-editable td:not(:last-child) {
    border: 1px solid red;
  }

  .example-menu {
    text-align: right;
  }

  .example-menu ul {
    padding: 0 1rem;
  }

  .example-menu li {
    display: inline-block;
    list-style: none;
    border-left: 1px solid #ccc;
    padding: 0 1rem;
  }
</style>
<duet-layout center>
  <div slot="main">
    <duet-card>
      <form action="#" novalidate>
        <duet-fieldset label="Editable-table header slot">
          <duet-choice-group
            direction="horizontal"
            label="Check to enable a column"
            name="group"
            responsive
            value="one"
          >
            <duet-checkbox checked data-key="name" label="Name"></duet-checkbox>
            <duet-checkbox checked data-key="last_name" label="Last name"></duet-checkbox>
            <duet-checkbox checked data-key="age" label="Age"></duet-checkbox>
            <duet-checkbox data-key="hidden_age" label="Hidden age"></duet-checkbox>
          </duet-choice-group>
        </duet-fieldset>
      </form>
      <form action="#" novalidate>
        <duet-fieldset label="Editable-table footer slot">
          <duet-button id="flipit" variation="secondary"> Flip Column Order</duet-button>
        </duet-fieldset>
      </form>
    </duet-card>
    <duet-card>
      <duet-heading level="h1" visual-level="h3">Duet-editable-table with inline actions</duet-heading>

      <duet-editable-table id="duet-editable-table_table_with_actions_and_sorting" margin="auto" sortable sticky sticky-distance="none" variation="striped">
        <div class="example-menu" slot="thead-first">
          <div>
            <ul role="menubar">
              <li role="menuitem">
                <duet-button
                  accessible-label="Download the table as a CSV file"
                  fixed
                  icon="action-download"
                  icon-size="medium"
                  margin="none"
                  padding="none"
                  variation="plain"
                >
                  Download as CSV
                </duet-button>
              </li>
              <li role="menuitem">
                <duet-button
                  accessible-label="Copy the data to you Clipboard as csv"
                  fixed
                  icon="form-file"
                  icon-size="medium"
                  margin="none"
                  padding="none"
                  variation="plain"
                >
                  copy
                </duet-button>
              </li>
            </ul>
          </div>
        </div>
      </duet-editable-table>
    </duet-card>
  </div>
</duet-layout>

<script>
  (function(){
    // Save a reference to the elements
    const flipit = document.querySelector("#flipit");
    const eTable = document.querySelector("#duet-editable-table_table_with_actions_and_sorting");
    const form = document.querySelectorAll("duet-checkbox");
    const columnSelector = document.querySelectorAll("duet-checkbox");

    // Listen for change events in the select
    flipit.addEventListener("click", function(e) {

      eTable.columns = eTable.columns.reverse().map((item, index) => {
        item.index = index;
        return item;
      });


    });

    // defined actions - if this is not defined, the table will not have any actions
    eTable.actions = [
      {
        "icon": "action-edit-2",
        "color": "primary",
        "name": "edit",
        "size": "x-small",
        "background": "gray-lightest",
        "label": {
          "fi": "Muokkaa luokkaa",
          "en": "Edit category",
          "sv": "Redigera kategori",
        },
      },
      {
        "icon": "action-delete",
        "color": "danger",
        "name": "delete",
        "size": "x-small",
        "background": "gray-lightest",
        "label": {
          "fi": "Poista",
          "en": "Delete",
          "sv": "Radera",
        },
      },
    ];

    //defined columns, if this is set, rows must also be defined for this to have an affect
    eTable.columns = [
      {
        sort_order: 1, direction: 1, index: 0, key: "name",
        label: {
          "fi": "Name",
          "en": "Name",
          "sv": "Name",
        },
      },
      {
        sort_order: 2, direction: -1, index: 1, key: "last_name",
        label: {
          "fi": "Last name",
          "en": "Last name",
          "sv": "Last name",
        },
      },
      {
        direction: 1, index: 2, key: "age",
        label: {
          "fi": "Age",
          "en": "Age",
          "sv": "Age",
        },
      },
      {
        direction: 1, index: 3, key: "hidden_age", display: false,
        label: {
          "fi": "hidden age",
          "en": "hidden age",
          "sv": "hidden age",
        },
      },
    ];

    //defined rows, if this is set, columns must also be defined for this to have an affect
    eTable.rows = [{
      "name": "Jenn",
      "last_name": "Woodburne",
      "age": 65,
      "hidden_age": 25,
      "meta": {
        "id": "1",
      },
    }, {
      "name": "Symon",
      "last_name": "Effemy",
      "age": 91,
      "hidden_age": 25,
      "meta": {
        "id": "2",
      },
    }, {
      "name": "Shari",
      "last_name": "Pattlel",
      "age": 81,
      "hidden_age": 25,
      "meta": {
        "id": "3",
      },
    }, {
      "name": "Trudy",
      "last_name": "MacRitchie",
      "age": 56,
      "hidden_age": 25,
      "meta": {
        "id": "4",
      },
    }, {
      "name": "Dick",
      "last_name": "Gorgen",
      "age": 69,
      "hidden_age": 25,
      "meta": {
        "id": "5",
      },
    }, {
      "name": "Pia",
      "last_name": "Siemens",
      "age": 93,
      "hidden_age": 25,
      "meta": {
        "id": "6",
      },
    }, {
      "name": "Fred",
      "last_name": "Baslter",
      "age": 78,
      "hidden_age": 25,
      "meta": {
        "id": "7",
      },
    }, {
      "name": "Fred",
      "last_name": "Alster",
      "age": 54,
      "hidden_age": 25,
      "meta": {
        "id": "8",
      },
    }, {
      "name": "Mair",
      "last_name": "Camier",
      "age": 76,
      "hidden_age": 25,
      "meta": {
        "id": "9",
      },
    }, {
      "name": "Meade",
      "last_name": "Hansana",
      "age": 68,
      "hidden_age": 25,
      "meta": {
        "id": "10",
      },
    }];

    // function that sorts an array (in this case table.rows) by columns in descending order

    function fieldSorter(fields) {
      return function(a, b) {
        return fields
          .map(function(o) {
            let dir = 1;
            if (o[0] === "-") {
              dir = -1;
              o = o.substring(1);
            }
            if (a[o] > b[o]) return dir;
            if (a[o] < b[o]) return -(dir);
            return 0;
          })
          .reduce(function firstNonZeroValue(p, n) {
            return p ? p : n;
          }, 0);
      };
    }

    //change the sort order of a specific column
    function setSortOrder({ order, direction, index, column }) {
      const newArray = eTable.columns.map((item) => {
        if (item.key === column) {
          // set sort_order to 0, which is ignored in the component as undefined
          item.sort_order = 0;
          // flip direction asc->desc and desc->asc
          item.direction = item.direction === -1 ? 1 : -1;
        }
        return item;
      })
        // sort the array by sort_order thereby getting a 0,1,3,4,x sequence
        .sort(fieldSorter(["sort_order"]))
        // reset that sequence to a 1,2,3,4 situation and ignore anything where sort order was not defined
        .map((item, i) => {
          if (item.sort_order || item.sort_order === 0) {
            item.sort_order = i + 1;
          }
          return item;
        });

      eTable.columns = newArray;

    }


    // Listen for toggle events
    eTable.addEventListener("duetTableToggle", function(e) {
      console.log("Event received from duet-table: ", e.detail);
      setSortOrder({
        order: e.detail.sort_order,
        direction: e.detail.direction,
        index: e.detail.index,
        column: e.detail.key,
      });
    });


    eTable.addEventListener("duetActionEvent", function(e) {

      //quick demonstration of how to delete items from the rows array
      console.log("Event received from duet-table: ", e.detail);
      if (e.detail.action === "delete") {
        eTable.rows = eTable.rows.map(item => item.meta.id !== e.detail.meta.id ? item : null).filter(item => item);
      }
    });

    form.forEach(item => {
      item.addEventListener("duetChange", function(e) {
        const target = e.target.getAttribute("data-key");
        const state = e.detail.checked;

        eTable.columns = eTable.columns.map((item) => {
          if (item.key === target) {
            item.display = state;
          }
          return item;
        });
      });
    });
  }())
</script>