Data Table
<zn-data-table> | ZnDataTable
Short summary of the component’s intended use.
<zn-data-table standalone data="{"data":[{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}}]}" headers="{"caption":"Name","duplicate":"Duplicate","type":"Type","scheme":"Scheme","pfp":"Fingerprint","last4":"Last 4","expiry":"Expiry","issuer":"Issuer","transactions":"Transactions","actions":""}"> <zn-data-table-sort slot="sort"></zn-data-table-sort> <zn-data-table-filter slot="filter" filters="[{"id":"title","name":"Title","operators":["eq"]},{"id":"author","name":"Author","operators":["eq","fuzzy"]},{"id":"genre","name":"Genre","options":{"action":"Action","comedy":"Comedy","drama":"Drama","fantasy":"Fantasy","horror":"Horror","mystery":"Mystery","romance":"Romance","thriller":"Thriller","sci-fi":"ScienceFiction"},"maxOptionsVisible":"3","operators":["eq","in"]},{"id":"rating","name":"Rating","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"created","name":"Created","type":"date","operators":["eq","before","after"]}]"> </zn-data-table-filter> </zn-data-table>
Examples
No Data
<zn-panel> <zn-data-table data="{"data":[]}" headers="{"caption":"Name","duplicate":"Duplicate","type":"Type","scheme":"Scheme","pfp":"Fingerprint","last4":"Last 4","expiry":"Expiry","issuer":"Issuer","transactions":"Transactions","actions":""}"> </zn-data-table> </zn-panel>
In a Panel
<zn-panel> <zn-data-table data="{"data":[{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}}]}" headers="{"caption":"Name","duplicate":"Duplicate","type":"Type","scheme":"Scheme","pfp":"Fingerprint","last4":"Last 4","expiry":"Expiry","issuer":"Issuer","transactions":"Transactions","actions":""}"> <zn-data-table-sort slot="sort"></zn-data-table-sort> <zn-data-table-filter slot="filter" filters="[{"id":"title","name":"Title","operators":["eq"]},{"id":"author","name":"Author","operators":["eq","fuzzy"]},{"id":"genre","name":"Genre","options":{"action":"Action","comedy":"Comedy","drama":"Drama","fantasy":"Fantasy","horror":"Horror","mystery":"Mystery","romance":"Romance","thriller":"Thriller","sci-fi":"ScienceFiction"},"maxOptionsVisible":"3","operators":["eq","in"]},{"id":"rating","name":"Rating","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"created","name":"Created","type":"date","operators":["eq","before","after"]}]"> </zn-data-table-filter> </zn-data-table> </zn-panel>
Lots of Data
<zn-data-table standalone data="{"data":[{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}}]}" headers="{"caption":"Name","duplicate":"Duplicate","type":"Type","scheme":"Scheme","pfp":"Fingerprint","last4":"Last 4","expiry":"Expiry","issuer":"Issuer","transactions":"Transactions","actions":""}"> <zn-data-table-sort slot="sort"></zn-data-table-sort> <zn-data-table-filter slot="filter" filters="[{"id":"title","name":"Title","operators":["eq"]},{"id":"author","name":"Author","operators":["eq","fuzzy"]},{"id":"genre","name":"Genre","options":{"action":"Action","comedy":"Comedy","drama":"Drama","fantasy":"Fantasy","horror":"Horror","mystery":"Mystery","romance":"Romance","thriller":"Thriller","sci-fi":"ScienceFiction"},"maxOptionsVisible":"3","operators":["eq","in"]},{"id":"rating","name":"Rating","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"created","name":"Created","type":"date","operators":["eq","before","after"]}]"> </zn-data-table-filter> </zn-data-table>
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/data-table/data-table.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/data-table/data-table.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/data-table/data-table.js';
Slots
Name | Description |
---|---|
(default) | The default slot. |
example
|
An example slot. |
Learn more about using slots.
Events
Name | React Event | Description | Event Detail |
---|---|---|---|
zn-event-name |
|
Emitted as an example. | - |
Learn more about events.
Custom Properties
Name | Description | Default |
---|---|---|
--example |
An example CSS custom property. |
Learn more about customizing CSS custom properties.
Parts
Name | Description |
---|---|
base |
The component’s base wrapper. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-button>
<zn-example>
<zn-icon>
<zn-input>
<zn-option>
<zn-popup>
<zn-query-builder>
<zn-select>
<zn-tag>
<zn-tooltip>