mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(components): add initial DataTable component

Browse source
This commit is contained in:
Eric Liu 2020-01-06 06:06:08 -08:00
commit f7551e4a8f
11 changed files with 359 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/DataTable/Table.svelte Normal file
View file

@ -0,0 +1,28 @@
<script>
let className = undefined;
export { className as class };
export let zebra = false;
export let size = undefined;
export let useStaticWidth = false;
export let shouldShowBorder = false;
export let isSortable = false;
export let stickyHeader = false;
export let style = undefined;
import { cx } from '../../lib';
</script>
{#if stickyHeader}
<section class={cx('--data-table_inner-container', className)} {style}>
<table
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', isSortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header')}>
<slot />
</table>
</section>
{:else}
<table
class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', isSortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header', className)}
{style}>
<slot />
</table>
{/if}