scania / corporate-ui

This repo will be archived in Q3 2021, please visit https://github.com/scania-digital-design-system
https://digitaldesign.scania.com/
25 stars 15 forks source link

Improvement - adapted stylesheet for c-table #569

Closed helloimela closed 4 years ago

helloimela commented 4 years ago

Describe pull-request

Solving issue
Fixes: #551

How to test

Test together with https://github.com/scania/scania-theme/pull/146

Use component:

<c-table></c-table>

<script>

const arr = [
      {
        "id":1,
        "name" : "Harru",
        "lastname": "Haru",
        "email": "haru@ka.com"
      },
      {
        "id":2,
        "name" : "Johan",
        "lastname": "Johansson",
        "email": "johan@asdf.com"
      },
      {
        "id":3,
        "name" : "Mika",
        "lastname": "Fedora",
        "email": "asasa@eee.com"
      },

    ]

    const el = document.querySelector('c-table');

    el.header = [
      {
        key: "name",
        description: "First Name",
      },
      {
        key: "lastname",
        description: "Last Name",
      },
      {
        key: "email",
        description: "Email",
      }
    ]
    el.content = arr;

    el.hasEdit = true;
    el.hasDelete = true;
    el.addEventListener('optEdit', testEdit)
    el.addEventListener('optDelete', testDelete)

    function testEdit(msg) {
      alert(JSON.stringify(msg.detail));
    }

    function testDelete(msg) {
    // es6 format won't work in IE
       let newArr = [...el.content];
       newArr.forEach(function(item, index){
         if(item.id == msg.detail.id) {
           newArr.splice(index, 1)
         }
       })
       el.content = newArr;
    }
</script>

Screenshots
If applicable, add screenshots to help explain

Additional context
Add any other context about the pull-request here.

mmexvr commented 4 years ago

image

mmexvr commented 4 years ago

Looks good!

565 Reference, this PR is related with some fixes and improvements from that PR