2.4

NEW

Appearance

2.4

NEW

Table ​

A table displays rows of data.

Import ​

js
import {
  MpTable,
  MpTableHead,
  MpTableBody,
  MpTableRow,
  MpTableCell,
  MpTableContainer
} from '@mekari/pixel3'

Playground ​

Employee name Start effective date Benefit group Benefit limitation
Andy Bernard1 Jan 2020LeaderRp150.000.000
Angela Martin-Staff-
Dwight Schrute1 Jan 2021ManagementRp200.000.000
Jim Helpert1 Jan 2021ManagementRp200.000.000
Kevin Malone23 Sep 2020AccountingRp50.000.000
<template>
  <MpTableContainer>
    <MpTable>
      <MpTableHead>
        <MpTableRow>
          <MpTableCell scope="col"> Employee name </MpTableCell>
          <MpTableCell scope="col"> Start effective date </MpTableCell>
          <MpTableCell scope="col"> Benefit group </MpTableCell>
          <MpTableCell scope="col"> Benefit limitation </MpTableCell>
        </MpTableRow>
      </MpTableHead>
      <MpTableBody>
        <MpTableRow v-for="employee in employees" :key="employee.id">
          <MpTableCell as="td" scope="row">
            {{ employee.name }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ employee.effective_date }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ employee.benefit_group }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ employee.benefit_limitation }}
          </MpTableCell>
        </MpTableRow>
      </MpTableBody>
    </MpTable>
  </MpTableContainer>
</template>

<script setup lang="ts">
  import {
    MpTable,
    MpTableHead,
    MpTableBody,
    MpTableRow,
    MpTableCell,
    MpTableContainer
  } from '@mekari/pixel3'

  const employees = [
    {
      id: 1,
      name: 'Andy Bernard',
      effective_date: '1 Jan 2020',
      benefit_group: 'Leader',
      benefit_limitation: 'Rp150.000.000'
    },
    {
      id: 2,
      name: 'Angela Martin',
      effective_date: '-',
      benefit_group: 'Staff',
      benefit_limitation: '-'
    },
    {
      id: 3,
      name: 'Dwight Schrute',
      effective_date: '1 Jan 2021',
      benefit_group: 'Management',
      benefit_limitation: 'Rp200.000.000'
    },
    {
      id: 4,
      name: 'Jim Helpert',
      effective_date: '1 Jan 2021',
      benefit_group: 'Management',
      benefit_limitation: 'Rp200.000.000'
    },
    {
      id: 5,
      name: 'Kevin Malone',
      effective_date: '23 Sep 2020',
      benefit_group: 'Accounting',
      benefit_limitation: 'Rp50.000.000'
    }
  ]
</script>

API ​

MpTable ​

Props
Slots
NameTypeDefault
is-hoverable
If true, table highlighted when hovered.
booleantrue

MpTableHead ​

Props
Slots
NameTypeDefault
is-fixed
If true, table have fixed header.
booleanfalse

MpTableBody ​

Slots
NameType
default
Slot to render child element.
any

MpTableRow ​

Slots
NameType
default
Slot to render child element.
any

MpTableCell ​

Props
Slots
NameTypeDefault
as
Rendered tag of table cell.
stringth
is-fixed
If true, table have fixed cell.
booleanfalse

MpTableContainer ​

Props
Events
Slots
NameTypeDefault
has-shadow
If true, table have shadow when overflow.
booleanfalse

Usage ​

Table Fixed ​

Employee name
Start effective date Benefit group Benefit limitation
Andy Bernard
1 Jan 2020LeaderRp150.000.000
Angela Martin
-Staff-
Dwight Schrute
1 Jan 2021ManagementRp200.000.000
Jim Helpert
1 Jan 2021ManagementRp200.000.000
Kevin Malone
23 Sep 2020AccountingRp50.000.000
<template>
  <MpTableContainer
    :class="
      css({
        width: 'full',
        height: '240px'
      })
    "
  >
    <MpTable>
      <MpTableHead is-fixed>
        <MpTableRow>
          <MpTableCell
            :class="
              css({
                boxShadow: borderFixedRight
              })
            "
            scope="col"
            is-fixed
          >
            <MpFlex alignItems="center" gap="2">
              <MpCheckbox id="employee_name" />
              Employee name
            </MpFlex>
          </MpTableCell>
          <MpTableCell
            :class="
              css({
                minWidth: '200px'
              })
            "
            scope="col"
          >
            Start effective date
          </MpTableCell>
          <MpTableCell
            :class="
              css({
                minWidth: '200px'
              })
            "
            scope="col"
          >
            Benefit group
          </MpTableCell>
          <MpTableCell
            :class="
              css({
                minWidth: '200px'
              })
            "
            scope="col"
          >
            Benefit limitation
          </MpTableCell>
          <MpTableCell
            :class="
              css({
                boxShadow: borderFixedLeft
              })
            "
            scope="col"
            is-fixed
          ></MpTableCell>
        </MpTableRow>
      </MpTableHead>
      <MpTableBody>
        <MpTableRow v-for="employee in employees" :key="employee.id">
          <MpTableCell
            :class="
              css({
                boxShadow: borderFixedRight
              })
            "
            as="td"
            scope="row"
            is-fixed
          >
            <MpFlex alignItems="center" gap="2">
              <MpCheckbox :id="employee.name" />
              <MpAvatar :id="employee.name" variant-color="gray" />
              {{ employee.name }}
            </MpFlex>
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ employee.effective_date }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ employee.benefit_group }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ employee.benefit_limitation }}
          </MpTableCell>
          <MpTableCell
            :class="
              css({
                boxShadow: borderFixedLeft
              })
            "
            as="td"
            scope="row"
            is-fixed
          >
            <MpButton variant="secondary">Action</MpButton>
          </MpTableCell>
        </MpTableRow>
      </MpTableBody>
    </MpTable>
  </MpTableContainer>
</template>

<script setup lang="ts">
  import {
    MpTable,
    MpTableHead,
    MpTableBody,
    MpTableRow,
    MpTableCell,
    MpTableContainer,
    MpButton,
    MpAvatar,
    MpCheckbox,
    MpFlex,
    css
  } from '@mekari/pixel3'
  import { usePixelTheme } from '@mekari/pixel3-utils'

  const { isNextTheme } = usePixelTheme()

  // isNextTheme used to switch for Pixel Token 2.4
  const borderFixedRight = isNextTheme.value
    ? 'inset -2px 0px var(--mp-colors-border-default)'
    : 'inset -2px 0px var(--mp-colors-gray-100)'
  const borderFixedLeft = isNextTheme.value
    ? 'inset 2px 0px var(--mp-colors-border-default)'
    : 'inset 2px 0px var(--mp-colors-gray-100)'

  const employees = [
    {
      id: 1,
      name: 'Andy Bernard',
      effective_date: '1 Jan 2020',
      benefit_group: 'Leader',
      benefit_limitation: 'Rp150.000.000'
    },
    {
      id: 2,
      name: 'Angela Martin',
      effective_date: '-',
      benefit_group: 'Staff',
      benefit_limitation: '-'
    },
    {
      id: 3,
      name: 'Dwight Schrute',
      effective_date: '1 Jan 2021',
      benefit_group: 'Management',
      benefit_limitation: 'Rp200.000.000'
    },
    {
      id: 4,
      name: 'Jim Helpert',
      effective_date: '1 Jan 2021',
      benefit_group: 'Management',
      benefit_limitation: 'Rp200.000.000'
    },
    {
      id: 5,
      name: 'Kevin Malone',
      effective_date: '23 Sep 2020',
      benefit_group: 'Accounting',
      benefit_limitation: 'Rp50.000.000'
    }
  ]
</script>

With Shadow ​

Product name Product code Category Qty Minimum stock Unit Average price Buy price Sell price
Apple Macbook Pro 2021 14" inch M1 Pro Chip 512GB GrayMBPM1-2021Laptop208PcsRp28.000.000Rp27.000.000Rp30.000.000
Apple iPhone 14 Pro 5G 1TBIP14-5G1TBSmartphone28PcsRp18.000.000Rp17.000.000Rp20.000.000
Apple iPhone 14 Plus 5G 512GBIP14PLS-5G512gbSmartphone92PcsRp16.000.000Rp16.000.000Rp17.000.000
iPad Pro M2 2022 4th 11 / 6th 12.9 inch WIFI 128GBIPPRO-M2128GBSmartphone801PcsRp13.000.000Rp13.000.000Rp12.000.000
MacBook Air 2022 M2 Chip 13" Inch 512GBMBAM2-2022Laptop2001PcsRp15.000.000Rp16.000.000Rp16.000.000
<template>
  <MpTableContainer has-shadow>
    <MpTable :is-hoverable="false">
      <MpTableHead is-fixed>
        <MpTableRow>
          <MpTableCell as="th" scope="col"> Product name </MpTableCell>
          <MpTableCell as="th" scope="col"> Product code </MpTableCell>
          <MpTableCell as="th" scope="col"> Category </MpTableCell>
          <MpTableCell as="th" scope="col"> Qty </MpTableCell>
          <MpTableCell as="th" scope="col"> Minimum stock </MpTableCell>
          <MpTableCell as="th" scope="col"> Unit </MpTableCell>
          <MpTableCell as="th" scope="col"> Average price </MpTableCell>
          <MpTableCell as="th" scope="col"> Buy price </MpTableCell>
          <MpTableCell as="th" scope="col"> Sell price </MpTableCell>
        </MpTableRow>
      </MpTableHead>
      <MpTableBody>
        <MpTableRow v-for="product in products" :key="product.id">
          <MpTableCell as="td" scope="row">
            {{ product.name }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ product.code }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ product.category }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ product.qty }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ product.minimumStock }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ product.unit }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ product.averagePrice }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ product.buyPrice }}
          </MpTableCell>
          <MpTableCell as="td" scope="row">
            {{ product.sellPrice }}
          </MpTableCell>
        </MpTableRow>
      </MpTableBody>
    </MpTable>
  </MpTableContainer>
</template>

<script setup lang="ts">
  import {
    MpTable,
    MpTableHead,
    MpTableBody,
    MpTableRow,
    MpTableCell,
    MpTableContainer
  } from '@mekari/pixel3'

  const products = [
    {
      id: 1,
      name: 'Apple Macbook Pro 2021 14" inch M1 Pro Chip 512GB Gray',
      code: 'MBPM1-2021',
      category: 'Laptop',
      qty: 20,
      minimumStock: 8,
      unit: 'Pcs',
      averagePrice: 'Rp28.000.000',
      buyPrice: 'Rp27.000.000',
      sellPrice: 'Rp30.000.000'
    },
    {
      id: 2,
      name: 'Apple iPhone 14 Pro 5G 1TB',
      code: 'IP14-5G1TB',
      category: 'Smartphone',
      qty: 2,
      minimumStock: 8,
      unit: 'Pcs',
      averagePrice: 'Rp18.000.000',
      buyPrice: 'Rp17.000.000',
      sellPrice: 'Rp20.000.000'
    },
    {
      id: 3,
      name: 'Apple iPhone 14 Plus 5G 512GB',
      code: 'IP14PLS-5G512gb',
      category: 'Smartphone',
      qty: 9,
      minimumStock: 2,
      unit: 'Pcs',
      averagePrice: 'Rp16.000.000',
      buyPrice: 'Rp16.000.000',
      sellPrice: 'Rp17.000.000'
    },
    {
      id: 4,
      name: 'iPad Pro M2 2022 4th 11 / 6th 12.9 inch WIFI 128GB',
      code: 'IPPRO-M2128GB',
      category: 'Smartphone',
      qty: 80,
      minimumStock: 1,
      unit: 'Pcs',
      averagePrice: 'Rp13.000.000',
      buyPrice: 'Rp13.000.000',
      sellPrice: 'Rp12.000.000'
    },
    {
      id: 5,
      name: 'MacBook Air 2022 M2 Chip 13" Inch 512GB',
      code: 'MBAM2-2022',
      category: 'Laptop',
      qty: 200,
      minimumStock: 1,
      unit: 'Pcs',
      averagePrice: 'Rp15.000.000',
      buyPrice: 'Rp16.000.000',
      sellPrice: 'Rp16.000.000'
    }
  ]
</script>

© Copyright 2024 PT Mid Solusi Nusantara.