DataTable

Source code
Table of Contents

Usage

Default

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
  import { DataTable } from "carbon-components-svelte";
</script>

<DataTable
  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
/>

With title, description

Load balancers

Your organization's active load balancers.

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
  import { DataTable } from "carbon-components-svelte";
</script>

<DataTable
  title="Load balancers"
  description="Your organization's active load balancers."
  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
/>

Zebra stripes

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
  import { DataTable } from "carbon-components-svelte";
</script>

<DataTable
  zebra
  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
/>

Short rows

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
  import { DataTable } from "carbon-components-svelte";
</script>

<DataTable
  size="short"
  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
/>

Compact rows

Name Protocol Port Rule
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
  import { DataTable } from "carbon-components-svelte";
</script>

<DataTable
  size="compact"
  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
/>

Sortable
Load Balancer 3HTTP3000Round robin
Load Balancer 1HTTP443Round robin
Load Balancer 2HTTP80DNS delegation
Load Balancer 6HTTP3000Round robin
Load Balancer 4HTTP443Round robin
Load Balancer 5HTTP80DNS delegation 
<script>
  import { DataTable } from "carbon-components-svelte";
</script>

<DataTable
  sortable
  headers={[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'rule', value: 'Rule' }]}
  rows={[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, rule: 'Round robin' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, rule: 'Round robin' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, rule: 'DNS delegation' }]}
/>

Skeleton

 
<script>
  import { DataTableSkeleton } from "carbon-components-svelte";
</script>

<DataTableSkeleton />

Skeleton with headers, row count

NameProtocolPortRule
 
<script>
  import { DataTableSkeleton } from "carbon-components-svelte";
</script>

<DataTableSkeleton headers={['Name', 'Protocol', 'Port', 'Rule']} rows={10} />

Skeleton without header, toolbar

 
<script>
  import { DataTableSkeleton } from "carbon-components-svelte";
</script>

<DataTableSkeleton showHeader={false} showToolbar={false} />
Table of Contents