mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity
carbon-components-svelte/components/DataTable/index.html
Eric Liu 23df7bfbae Updates
2020-10-02 20:26:53 -07:00

83 lines
No EOL
84 KiB
HTML
Raw Blame History

<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<link rel="icon" href="/carbon-components-svelte/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTable</title>
<link rel="stylesheet" href="/carbon-components-svelte/assets/style.cdc12fd8.css">
<style>.action-link.svelte-1viyq4q{text-align:center;align-items:center;vertical-align:middle;justify-content:center;padding-top:10px}.bx--col>h1{font-size:var(--cds-productive-heading-07-font-size);font-weight:var(--cds-productive-heading-07-font-weight);letter-spacing:var(--cds-productive-heading-07-letter-spacing);line-height:var(--cds-productive-heading-07-line-height);margin-bottom:var(--cds-layout-01)}.big-paragraph{font-size:1.5rem;font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height);margin-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-05)}.bx--col>.big-paragraph>code{font-size:var(--cds-productive-heading-03-font-size);font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height)}.big-link{font-size:1.5rem;font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height)}.bx--col>p>code{font-size:var(--cds-code-02-font-size);font-weight:var(--cds-code-02-font-weight);line-height:var(--cds-code-02-line-height);letter-spacing:var(--cds-code-02-letter-spacing);background-color:var(--cds-ui-03);border-radius:.25rem;padding:0 var(--cds-spacing-02)}.bx--col>h2{font-size:var(--cds-productive-heading-06-font-size);font-weight:var(--cds-productive-heading-06-font-weight);letter-spacing:var(--cds-productive-heading-06-letter-spacing);line-height:var(--cds-productive-heading-06-line-height);padding-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-01)}.bx--col>h3{font-size:var(--cds-productive-heading-04-font-size);font-weight:var(--cds-productive-heading-04-font-weight);letter-spacing:var(--cds-productive-heading-04-letter-spacing);line-height:var(--cds-productive-heading-04-line-height);padding-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-02)}.bx--col>h4{font-size:var(--cds-productive-heading-02-font-size);font-weight:var(--cds-productive-heading-02-font-weight);letter-spacing:var(--cds-productive-heading-02-letter-spacing);line-height:var(--cds-productive-heading-02-line-height);padding-top:var(--cds-layout-04);margin-bottom:var(--cds-layout-01)}.bx--col>p{max-width:44rem;margin-bottom:var(--cds-layout-02)}.bx--content{background:0 0}@media(max-width:1056px){.bx--side-nav~.bx--content{margin-left:0;padding-left:1rem;padding-right:1rem}.bx--side-nav--expanded~.bx--content{white-space:nowrap;min-width:28rem}}.platform-name{display:flex;align-items:baseline}.platform-name code{margin-left:var(--cds-spacing-02);font-size:var(--cds-code-01-font-size);font-weight:var(--cds-code-01-font-weight);letter-spacing:var(--cds-code-01-letter-spacing);line-height:var(--cds-code-01-line-height);color:#c6c6c6}@media(max-width:580px){.platform-name code{display:none}}@media(min-width:1057px){.bx--side-nav__navigation{z-index:1}}.bx--side-nav__submenu[aria-expanded=true]+.bx--side-nav__menu{max-height:120rem}</style><style></style><meta name="title" content="DataTable" data-origin="routify"><meta property="og:title" content="DataTable" data-origin="routify"></head>
<body style="">
<div id="app" style=""> <header role="banner" aria-label="Navigation" class="bx--header"><div slot="skip-to-content"><a href="#main-content" tabindex="0" class="bx--skip-to-content">Skip to main content</a></div> <a href="/" aria-label="Navigation" class="bx--header__name"> <span slot="platform" class="platform-name">Carbon Components Svelte <code>v0.15.0</code></span></a> <div class="bx--header__global"><a target="_blank" rel="noopener" href="https://github.com/IBM/carbon-components-svelte" class="bx--header__action action-link svelte-1viyq4q"><svg data-carbon-icon="LogoGithub20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg></a> <div><button type="button" class="bx--header__action svelte-19vx6se"><svg data-carbon-icon="AppSwitcher20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path></svg> </button> </div></div></header> <nav class="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--expanded"><ul class="bx--side-nav__items"><li class="bx--side-nav__item"><button type="button" aria-expanded="true" class="bx--side-nav__submenu"> <span class="bx--side-nav__submenu-title">Components</span> <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"><svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" preserveAspectRatio="xMidYMid meet" role="img" focusable="true" tabindex="0"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path><title>Open Menu</title></svg></div></button> <ul role="menu" class="bx--side-nav__menu"><li class="bx--side-nav__menu-item"><a href="/components/Accordion" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Accordion</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Breadcrumb" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Breadcrumb</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Button" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Button</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ButtonSet" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ButtonSet</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Checkbox" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Checkbox</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ClickableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ClickableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/CodeSnippet" class="bx--side-nav__link"><span class="bx--side-nav__link-text">CodeSnippet</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ComboBox" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ComboBox</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ComposedModal" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ComposedModal</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ContentSwitcher" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ContentSwitcher</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/CopyButton" class="bx--side-nav__link"><span class="bx--side-nav__link-text">CopyButton</span></a></li><li class="bx--side-nav__menu-item"><a aria-current="page" href="/components/DataTable" class="bx--side-nav__link"><span class="bx--side-nav__link-text">DataTable</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/DatePicker" class="bx--side-nav__link"><span class="bx--side-nav__link-text">DatePicker</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Dropdown" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Dropdown</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ExpandableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ExpandableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/FileUploader" class="bx--side-nav__link"><span class="bx--side-nav__link-text">FileUploader</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/FluidForm" class="bx--side-nav__link"><span class="bx--side-nav__link-text">FluidForm</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Form" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Form</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Grid" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Grid</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Icon" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Icon</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/InlineLoading" class="bx--side-nav__link"><span class="bx--side-nav__link-text">InlineLoading</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/InlineNotification" class="bx--side-nav__link"><span class="bx--side-nav__link-text">InlineNotification</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Link" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Link</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Loading" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Loading</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Modal" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Modal</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/MultiSelect" class="bx--side-nav__link"><span class="bx--side-nav__link-text">MultiSelect</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/NumberInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">NumberInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/OrderedList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">OrderedList</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/OverflowMenu" class="bx--side-nav__link"><span class="bx--side-nav__link-text">OverflowMenu</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Pagination" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Pagination</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/PaginationNav" class="bx--side-nav__link"><span class="bx--side-nav__link-text">PaginationNav</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/PasswordInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">PasswordInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ProgressIndicator" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ProgressIndicator</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/RadioButton" class="bx--side-nav__link"><span class="bx--side-nav__link-text">RadioButton</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/RadioTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">RadioTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Search" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Search</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Select" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Select</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SelectableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SelectableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SkeletonPlaceholder" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SkeletonPlaceholder</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SkeletonText" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SkeletonText</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Slider" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Slider</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/StructuredList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">StructuredList</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tabs" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tabs</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tag" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tag</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TextArea" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TextArea</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TextInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TextInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TimePicker" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TimePicker</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ToastNotification" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ToastNotification</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Toggle" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Toggle</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ToggleSmall" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ToggleSmall</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tooltip" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tooltip</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TooltipDefinition" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TooltipDefinition</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TooltipIcon" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TooltipIcon</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/UIShell" class="bx--side-nav__link"><span class="bx--side-nav__link-text">UIShell</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/UnorderedList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">UnorderedList</span></a></li></ul></li></ul></nav> <main id="main-content" data-components="true" class="bx--content"><div class="bx--grid"><div class="bx--row"><div class="bx--col"><h1>DataTable</h1> <div class="bar"><div class="bx--form-item"><div class="bx--select bx--select--inline"><label for="select-theme" class="bx--label">Theme</label> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="select-theme" class="bx--select-input"><option value="white" class="bx--select-option">White</option> <option value="g10" class="bx--select-option">Gray 10</option> <option value="g90" class="bx--select-option">Gray 90</option> <option value="g100" class="bx--select-option">Gray 100</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <a role="button" tabindex="0" disabled="false" href="https://github.com/IBM/carbon-components-svelte/tree/master/src/DataTable/DataTable.svelte" target="_blank" class="bx--btn bx--btn--field bx--btn--ghost"> Source code <svg data-carbon-icon="Code16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M31 16L24 23 22.59 21.59 28.17 16 22.59 10.41 24 9 31 16zM1 16L8 9 9.41 10.41 3.83 16 9.41 21.59 8 23 1 16z"></path><path d="M5.91 15H26.080000000000002V17H5.91z" transform="rotate(-75 15.996 16)"></path></svg></a></div></div></div> <div class="bx--row"><div class="prose bx--col"><div class="toc mobile"><h5>Table of Contents</h5> <div slot="aside"><ul class="bx--list--unordered"><li class="bx--list__item"><a class="bx--link" href="#usage">Usage</a> <ul class="bx--list--unordered bx--list--nested"><li class="bx--list__item"><a class="bx--link" href="#default">Default</a></li> <li class="bx--list__item"><a class="bx--link" href="#with-title-description">With title, description</a></li> <li class="bx--list__item"><a class="bx--link" href="#zebra-stripes">Zebra stripes</a></li> <li class="bx--list__item"><a class="bx--link" href="#short-rows">Short rows</a></li> <li class="bx--list__item"><a class="bx--link" href="#compact-rows">Compact rows</a></li> <li class="bx--list__item"><a class="bx--link" href="#sortable">Sortable</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton">Skeleton</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton-with-headers-row-count">Skeleton with headers, row count</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton-without-header-toolbar">Skeleton without header, toolbar</a></li></ul></li></ul></div></div> <h2 id="usage">Usage</h2> <h3 id="default">Default</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--data-table-container"> <table class="bx--data-table bx--data-table--no-border"><thead><tr><th scope="col" id="ccs-0.fbkz9nttco7"><span class="bx--table-header-label">Name </span></th><th scope="col" id="ccs-0.zhxmv6qhojm"><span class="bx--table-header-label">Protocol </span></th><th scope="col" id="ccs-0.6mrbclw14yg"><span class="bx--table-header-label">Port </span></th><th scope="col" id="ccs-0.ox3qecxoaqs"><span class="bx--table-header-label">Rule </span></th></tr></thead> <tbody aria-live="polite"><tr><td>Load Balancer 3</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 1</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 2</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr><tr><td>Load Balancer 6</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 4</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 5</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr></tbody></table></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> DataTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DataTable</span>
<span class="token attr-name">headers=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'protocol'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Protocol'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'port'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Port'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'rule'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Rule'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rows=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 3'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 1'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 2'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'d'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 6'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'e'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 4'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'f'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 5'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="with-title-description">With title, description</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--data-table-container"><div class="bx--data-table-header"><h4 class="bx--data-table-header__title">Load balancers</h4> <p class="bx--data-table-header__description">Your organization's active load balancers.</p></div> <table class="bx--data-table bx--data-table--no-border"><thead><tr><th scope="col" id="ccs-0.aknpzv6wnk"><span class="bx--table-header-label">Name </span></th><th scope="col" id="ccs-0.28rhj1ff1lr"><span class="bx--table-header-label">Protocol </span></th><th scope="col" id="ccs-0.anlsqlh37eq"><span class="bx--table-header-label">Port </span></th><th scope="col" id="ccs-0.vjroppstujd"><span class="bx--table-header-label">Rule </span></th></tr></thead> <tbody aria-live="polite"><tr><td>Load Balancer 3</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 1</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 2</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr><tr><td>Load Balancer 6</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 4</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 5</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr></tbody></table></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> DataTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DataTable</span>
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Load balancers<span class="token punctuation">"</span></span>
<span class="token attr-name">description</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Your organization's active load balancers.<span class="token punctuation">"</span></span>
<span class="token attr-name">headers=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'protocol'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Protocol'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'port'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Port'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'rule'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Rule'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rows=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 3'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 1'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 2'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'d'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 6'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'e'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 4'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'f'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 5'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="zebra-stripes">Zebra stripes</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--data-table-container"> <table class="bx--data-table bx--data-table--zebra bx--data-table--no-border"><thead><tr><th scope="col" id="ccs-0.3qlsytjxxy"><span class="bx--table-header-label">Name </span></th><th scope="col" id="ccs-0.pyqd6wrgzh9"><span class="bx--table-header-label">Protocol </span></th><th scope="col" id="ccs-0.ub45t1chh4k"><span class="bx--table-header-label">Port </span></th><th scope="col" id="ccs-0.cew39z6f26u"><span class="bx--table-header-label">Rule </span></th></tr></thead> <tbody aria-live="polite"><tr><td>Load Balancer 3</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 1</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 2</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr><tr><td>Load Balancer 6</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 4</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 5</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr></tbody></table></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> DataTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DataTable</span>
<span class="token attr-name">zebra</span>
<span class="token attr-name">headers=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'protocol'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Protocol'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'port'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Port'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'rule'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Rule'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rows=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 3'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 1'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 2'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'d'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 6'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'e'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 4'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'f'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 5'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="short-rows">Short rows</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--data-table-container"> <table class="bx--data-table bx--data-table--short bx--data-table--no-border"><thead><tr><th scope="col" id="ccs-0.74sggqkdy7w"><span class="bx--table-header-label">Name </span></th><th scope="col" id="ccs-0.ybyeuz3xr5"><span class="bx--table-header-label">Protocol </span></th><th scope="col" id="ccs-0.bccz11y4y3m"><span class="bx--table-header-label">Port </span></th><th scope="col" id="ccs-0.169pbksscwo"><span class="bx--table-header-label">Rule </span></th></tr></thead> <tbody aria-live="polite"><tr><td>Load Balancer 3</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 1</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 2</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr><tr><td>Load Balancer 6</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 4</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 5</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr></tbody></table></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> DataTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DataTable</span>
<span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>short<span class="token punctuation">"</span></span>
<span class="token attr-name">headers=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'protocol'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Protocol'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'port'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Port'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'rule'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Rule'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rows=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 3'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 1'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 2'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'d'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 6'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'e'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 4'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'f'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 5'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="compact-rows">Compact rows</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--data-table-container"> <table class="bx--data-table bx--data-table--compact bx--data-table--no-border"><thead><tr><th scope="col" id="ccs-0.yqggw3p5o29"><span class="bx--table-header-label">Name </span></th><th scope="col" id="ccs-0.vyurs70mbp"><span class="bx--table-header-label">Protocol </span></th><th scope="col" id="ccs-0.9w3xsrwpqpd"><span class="bx--table-header-label">Port </span></th><th scope="col" id="ccs-0.mq4uhsingbh"><span class="bx--table-header-label">Rule </span></th></tr></thead> <tbody aria-live="polite"><tr><td>Load Balancer 3</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 1</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 2</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr><tr><td>Load Balancer 6</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 4</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 5</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr></tbody></table></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> DataTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DataTable</span>
<span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>compact<span class="token punctuation">"</span></span>
<span class="token attr-name">headers=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'protocol'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Protocol'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'port'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Port'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'rule'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Rule'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rows=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 3'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 1'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 2'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'d'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 6'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'e'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 4'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'f'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 5'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="sortable">Sortable</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--data-table-container"> <table class="bx--data-table bx--data-table--sort bx--data-table--no-border"><thead><tr><th aria-sort="none" scope="col" id="ccs-0.z5uxpp5j19n"><button class="bx--table-sort"><span class="bx--table-header-label">Name </span> <svg data-carbon-icon="ArrowUp20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--table-sort__icon" preserveAspectRatio="xMidYMid meet" aria-label="" aria-hidden="true" focusable="false"><path d="M16 4L6 14 7.41 15.41 15 7.83 15 30 17 30 17 7.83 24.59 15.41 26 14 16 4z"></path></svg> <svg data-carbon-icon="ArrowsVertical20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--table-sort__icon-unsorted" preserveAspectRatio="xMidYMid meet" aria-label="" aria-hidden="true" focusable="false"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></path></svg></button></th><th aria-sort="none" scope="col" id="ccs-0.l9ip60w4urb"><button class="bx--table-sort"><span class="bx--table-header-label">Protocol </span> <svg data-carbon-icon="ArrowUp20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--table-sort__icon" preserveAspectRatio="xMidYMid meet" aria-label="" aria-hidden="true" focusable="false"><path d="M16 4L6 14 7.41 15.41 15 7.83 15 30 17 30 17 7.83 24.59 15.41 26 14 16 4z"></path></svg> <svg data-carbon-icon="ArrowsVertical20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--table-sort__icon-unsorted" preserveAspectRatio="xMidYMid meet" aria-label="" aria-hidden="true" focusable="false"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></path></svg></button></th><th aria-sort="none" scope="col" id="ccs-0.mcontklvf9p"><button class="bx--table-sort"><span class="bx--table-header-label">Port </span> <svg data-carbon-icon="ArrowUp20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--table-sort__icon" preserveAspectRatio="xMidYMid meet" aria-label="" aria-hidden="true" focusable="false"><path d="M16 4L6 14 7.41 15.41 15 7.83 15 30 17 30 17 7.83 24.59 15.41 26 14 16 4z"></path></svg> <svg data-carbon-icon="ArrowsVertical20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--table-sort__icon-unsorted" preserveAspectRatio="xMidYMid meet" aria-label="" aria-hidden="true" focusable="false"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></path></svg></button></th><th aria-sort="none" scope="col" id="ccs-0.jot66xqshgd"><button class="bx--table-sort"><span class="bx--table-header-label">Rule </span> <svg data-carbon-icon="ArrowUp20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--table-sort__icon" preserveAspectRatio="xMidYMid meet" aria-label="" aria-hidden="true" focusable="false"><path d="M16 4L6 14 7.41 15.41 15 7.83 15 30 17 30 17 7.83 24.59 15.41 26 14 16 4z"></path></svg> <svg data-carbon-icon="ArrowsVertical20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" class="bx--table-sort__icon-unsorted" preserveAspectRatio="xMidYMid meet" aria-label="" aria-hidden="true" focusable="false"><path d="M27.6 20.6L24 24.2 24 4 22 4 22 24.2 18.4 20.6 17 22 23 28 29 22zM9 4L3 10 4.4 11.4 8 7.8 8 28 10 28 10 7.8 13.6 11.4 15 10z"></path></svg></button></th></tr></thead> <tbody aria-live="polite"><tr><td>Load Balancer 3</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 1</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 2</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr><tr><td>Load Balancer 6</td><td>HTTP</td><td>3000</td><td>Round robin</td> </tr><tr><td>Load Balancer 4</td><td>HTTP</td><td>443</td><td>Round robin</td> </tr><tr><td>Load Balancer 5</td><td>HTTP</td><td>80</td><td>DNS delegation</td> </tr></tbody></table></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> DataTable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DataTable</span>
<span class="token attr-name">sortable</span>
<span class="token attr-name">headers=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Name'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'protocol'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Protocol'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'port'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Port'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'rule'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Rule'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token attr-name">rows=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 3'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 1'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 2'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'d'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 6'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'e'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 4'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">443</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'Round robin'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'f'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Load Balancer 5'</span><span class="token punctuation">,</span> protocol<span class="token operator">:</span> <span class="token string">'HTTP'</span><span class="token punctuation">,</span> port<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> rule<span class="token operator">:</span> <span class="token string">'DNS delegation'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="skeleton">Skeleton</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--skeleton bx--data-table-container"><div class="bx--data-table-header"><div class="bx--data-table-header__title"></div> <div class="bx--data-table-header__description"></div></div> <section aria-label="data table toolbar" class="bx--table-toolbar"><div class="bx--toolbar-content"><span class="bx--skeleton bx--btn bx--btn--sm"></span></div></section> <table class="bx--skeleton bx--data-table"><thead><tr><th></th><th></th><th></th><th></th><th></th></tr></thead> <tbody><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr> <tr><td></td><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td><td></td> </tr></tbody></table></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> DataTableSkeleton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DataTableSkeleton</span> <span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="skeleton-with-headers-row-count">Skeleton with headers, row count</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--skeleton bx--data-table-container"><div class="bx--data-table-header"><div class="bx--data-table-header__title"></div> <div class="bx--data-table-header__description"></div></div> <section aria-label="data table toolbar" class="bx--table-toolbar"><div class="bx--toolbar-content"><span class="bx--skeleton bx--btn bx--btn--sm"></span></div></section> <table class="bx--skeleton bx--data-table"><thead><tr><th>Name</th><th>Protocol</th><th>Port</th><th>Rule</th></tr></thead> <tbody><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr> <tr><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td> </tr></tbody></table></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> DataTableSkeleton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DataTableSkeleton</span> <span class="token attr-name">headers=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'Name'</span><span class="token punctuation">,</span> <span class="token string">'Protocol'</span><span class="token punctuation">,</span> <span class="token string">'Port'</span><span class="token punctuation">,</span> <span class="token string">'Rule'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">rows=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="skeleton-without-header-toolbar">Skeleton without header, toolbar</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--skeleton bx--data-table-container"> <table class="bx--skeleton bx--data-table"><thead><tr><th></th><th></th><th></th><th></th><th></th></tr></thead> <tbody><tr><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr> <tr><td></td><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td><td></td> </tr><tr><td></td><td></td><td></td><td></td><td></td> </tr></tbody></table></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> DataTableSkeleton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DataTableSkeleton</span> <span class="token attr-name">showHeader=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span> <span class="token attr-name">showToolbar=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> </div></div></div> <div class="table bx--col-lg-5 bx--col-xlg-4"><div class="toc"><h5>Table of Contents</h5> <div slot="aside"><ul class="bx--list--unordered"><li class="bx--list__item"><a class="bx--link" href="#usage">Usage</a> <ul class="bx--list--unordered bx--list--nested"><li class="bx--list__item"><a class="bx--link" href="#default">Default</a></li> <li class="bx--list__item"><a class="bx--link" href="#with-title-description">With title, description</a></li> <li class="bx--list__item"><a class="bx--link" href="#zebra-stripes">Zebra stripes</a></li> <li class="bx--list__item"><a class="bx--link" href="#short-rows">Short rows</a></li> <li class="bx--list__item"><a class="bx--link" href="#compact-rows">Compact rows</a></li> <li class="bx--list__item"><a class="bx--link" href="#sortable">Sortable</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton">Skeleton</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton-with-headers-row-count">Skeleton with headers, row count</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton-without-header-toolbar">Skeleton without header, toolbar</a></li></ul></li></ul></div></div></div></main> </div>
<script type="module" src="/carbon-components-svelte/assets/index.c2c9d961.js"></script>
</body></html>
Reference in a new issue View git blame Copy permalink