Callaloo

Appearance

Usage ​

Default ​

The CLTable component works together with related components to create a complete table structure: CLTable.Header, CLTable.Body, CLTable.Row, CLTable.Cell, CLTable.Footer, and CLTable.NestedCell.

vue
<script setup lang="ts">
import CLTable from '@codeandfunction/callaloo/CLTable';
</script>

<template>
  <CLTable>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Name</CLTable.Cell>
        <CLTable.Cell is-header>Email</CLTable.Cell>
        <CLTable.Cell is-header>Role</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>John Doe</CLTable.Cell>
        <CLTable.Cell>john@example.com</CLTable.Cell>
        <CLTable.Cell>Developer</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Jane Smith</CLTable.Cell>
        <CLTable.Cell>jane@example.com</CLTable.Cell>
        <CLTable.Cell>Designer</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Bob Johnson</CLTable.Cell>
        <CLTable.Cell>bob@example.com</CLTable.Cell>
        <CLTable.Cell>Manager</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>

Types ​

Use the type prop to customize the table's layout and spacing.

vue

Striped ​

Use the striped prop to add alternating background colors to table rows.

vue
<script setup lang="ts">
import CLTable from '@codeandfunction/callaloo/CLTable';
</script>

<template>
  <CLTable striped>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Product</CLTable.Cell>
        <CLTable.Cell is-header>Price</CLTable.Cell>
        <CLTable.Cell is-header>Stock</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Laptop</CLTable.Cell>
        <CLTable.Cell>$999</CLTable.Cell>
        <CLTable.Cell>15</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Mouse</CLTable.Cell>
        <CLTable.Cell>$29</CLTable.Cell>
        <CLTable.Cell>50</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Keyboard</CLTable.Cell>
        <CLTable.Cell>$79</CLTable.Cell>
        <CLTable.Cell>32</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Monitor</CLTable.Cell>
        <CLTable.Cell>$399</CLTable.Cell>
        <CLTable.Cell>8</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>

Bordered ​

Use the bordered prop to add borders to the entire table and its rows and columns.

vue
<script setup lang="ts">
import CLTable from '@codeandfunction/callaloo/CLTable';
</script>

<template>
  <CLTable bordered>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Name</CLTable.Cell>
        <CLTable.Cell is-header>Department</CLTable.Cell>
        <CLTable.Cell is-header>Status</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Alice Brown</CLTable.Cell>
        <CLTable.Cell>Engineering</CLTable.Cell>
        <CLTable.Cell>Active</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Charlie Davis</CLTable.Cell>
        <CLTable.Cell>Marketing</CLTable.Cell>
        <CLTable.Cell>Active</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Diana Evans</CLTable.Cell>
        <CLTable.Cell>Sales</CLTable.Cell>
        <CLTable.Cell>Inactive</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>

Rounded ​

Use the border-radius prop to customize the border radius when using the bordered prop.

vue

With Vertical Lines ​

Use the with-vertical-lines prop to add vertical separators between columns.

vue
<script setup lang="ts">
import CLTable from '@codeandfunction/callaloo/CLTable';
</script>

<template>
  <CLTable with-vertical-lines>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Column 1</CLTable.Cell>
        <CLTable.Cell is-header>Column 2</CLTable.Cell>
        <CLTable.Cell is-header>Column 3</CLTable.Cell>
        <CLTable.Cell is-header>Column 4</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Data 1</CLTable.Cell>
        <CLTable.Cell>Data 2</CLTable.Cell>
        <CLTable.Cell>Data 3</CLTable.Cell>
        <CLTable.Cell>Data 4</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Data 5</CLTable.Cell>
        <CLTable.Cell>Data 6</CLTable.Cell>
        <CLTable.Cell>Data 7</CLTable.Cell>
        <CLTable.Cell>Data 8</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>

Use the CLTable.Footer component to add a footer section to your table.

vue
<script setup lang="ts">
import CLTable from '@codeandfunction/callaloo/CLTable';
</script>

<template>
  <CLTable>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Item</CLTable.Cell>
        <CLTable.Cell is-header is-number>Quantity</CLTable.Cell>
        <CLTable.Cell is-header is-number>Price</CLTable.Cell>
        <CLTable.Cell is-header is-number>Total</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Product A</CLTable.Cell>
        <CLTable.Cell is-number>2</CLTable.Cell>
        <CLTable.Cell is-number>$50.00</CLTable.Cell>
        <CLTable.Cell is-number>$100.00</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Product B</CLTable.Cell>
        <CLTable.Cell is-number>1</CLTable.Cell>
        <CLTable.Cell is-number>$75.00</CLTable.Cell>
        <CLTable.Cell is-number>$75.00</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Product C</CLTable.Cell>
        <CLTable.Cell is-number>3</CLTable.Cell>
        <CLTable.Cell is-number>$25.00</CLTable.Cell>
        <CLTable.Cell is-number>$75.00</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
    <CLTable.Footer>
      <CLTable.Row>
        <CLTable.Cell>Total</CLTable.Cell>
        <CLTable.Cell is-number>6</CLTable.Cell>
        <CLTable.Cell></CLTable.Cell>
        <CLTable.Cell is-number>$250.00</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Footer>
  </CLTable>
</template>

Nested Cells ​

Use the CLTable.NestedCell component to display additional information within a cell.

vue
<script setup lang="ts">
import CLTable from '@codeandfunction/callaloo/CLTable';
</script>

<template>
  <CLTable>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Employee</CLTable.Cell>
        <CLTable.Cell is-header>Department</CLTable.Cell>
        <CLTable.Cell is-header>Contact</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>
          John Doe
          <CLTable.NestedCell>Senior Developer</CLTable.NestedCell>
        </CLTable.Cell>
        <CLTable.Cell>Engineering</CLTable.Cell>
        <CLTable.Cell>
          john@example.com
          <CLTable.NestedCell>+1 (555) 123-4567</CLTable.NestedCell>
        </CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>
          Jane Smith
          <CLTable.NestedCell>UX Designer</CLTable.NestedCell>
        </CLTable.Cell>
        <CLTable.Cell>Design</CLTable.Cell>
        <CLTable.Cell>
          jane@example.com
          <CLTable.NestedCell>+1 (555) 987-6543</CLTable.NestedCell>
        </CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>
          Bob Johnson
          <CLTable.NestedCell>Product Manager</CLTable.NestedCell>
        </CLTable.Cell>
        <CLTable.Cell>Product</CLTable.Cell>
        <CLTable.Cell>
          bob@example.com
          <CLTable.NestedCell>+1 (555) 246-8135</CLTable.NestedCell>
        </CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>

Column Widths ​

Use the col-widths prop to customize the width of each column.

vue
<script setup lang="ts">
import CLTable from '@codeandfunction/callaloo/CLTable';
</script>

<template>
  <CLTable :col-widths="['40%', '30%', '30%']">
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Description (40%)</CLTable.Cell>
        <CLTable.Cell is-header>Category (30%)</CLTable.Cell>
        <CLTable.Cell is-header>Status (30%)</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>This is a longer description that takes more space</CLTable.Cell>
        <CLTable.Cell>Type A</CLTable.Cell>
        <CLTable.Cell>Active</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Another description with more text content</CLTable.Cell>
        <CLTable.Cell>Type B</CLTable.Cell>
        <CLTable.Cell>Pending</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>

Cell Types ​

The CLTable.Cell component supports different cell types and modifiers.

vue
<script setup lang="ts">
import CLTable from '@codeandfunction/callaloo/CLTable';
</script>

<template>
  <CLTable>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Regular Cell</CLTable.Cell>
        <CLTable.Cell is-header is-number>Number Cell</CLTable.Cell>
        <CLTable.Cell is-header>Active Cell</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Standard text</CLTable.Cell>
        <CLTable.Cell is-number>1,234.56</CLTable.Cell>
        <CLTable.Cell is-active>Highlighted</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>More text</CLTable.Cell>
        <CLTable.Cell is-number>789.00</CLTable.Cell>
        <CLTable.Cell>Normal cell</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Another row</CLTable.Cell>
        <CLTable.Cell is-number>456.78</CLTable.Cell>
        <CLTable.Cell is-active>Also highlighted</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>

Props ​

Released under the MIT License.

Copyright © 2024-present Code+Function