# Table

Table component with inner rows, headers and data.

# Most common usage scenario

<template>
  <div style="padding: 1rem">
    <SfTable :class="customClass">
      <SfTableHeading>
        <SfTableHeader v-for="header in headers">{{ header }}</SfTableHeader>
      </SfTableHeading>
      <SfTableRow v-for="data in content">
        <SfTableData v-for="item in data">{{ item }}</SfTableData>
        <SfTableData class="text-success">Finalised</SfTableData>
      </SfTableRow>
    </SfTable>
  </div>
</template>

<script>
import { SfTable } from "@storefront-ui/vue";
import { SfButton } from "@storefront-ui/vue";

export default {
  components: {
    SfTable,
    SfButton
  },
  data() {
    return {
      headers: [
        "Quantity",
        "Payment date",
        "Payment method",
        "Amount",
        "Status"
      ],
      content: [
        ["#35767", "4th Nov", "Paypal", "12.00$"],
        ["#35767", "4th Nov", "Visa", "15.00$"],
        ["#35767", "4th Nov", "Paypal", "12.00$"]
      ]
    };
  }
};
</script>

# Props

None.

# Slots

  • default

# Events

None.

# CSS modifiers

  • .sf-table--bordered

# SCSS variables

None.

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Internal components

# TableData

# Props

None.

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# SCSS variables

None.

# TableHeader

# Props

None.

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# SCSS variables

None.

# TableHeading

# Props

None.

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# SCSS variables

None.

# TableRow

# Props

None.

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# SCSS variables

None.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/organisms/SfTable/SfTable.html"></template>
<script src="@storefront-ui/vue/src/components/organisms/SfTable/SfTable.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfTable.scss";
</style>

You can read about using component partials here

# Play with this component

See all available configurations and play with this component on Storybook.