From bbcf937b531a9b0dc8d71429ea30e8d2bddc7da6 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <isosidka@stsoft.ru>
Date: Tue, 28 Nov 2023 15:47:04 +0300
Subject: [PATCH] feat: Added table component (#28)

* feat: Added table component

* test: Fixed tests, updated snapshots

* fix: Fixed types build

* fix: Added disabled state to BuiInput
---
 src/components/BuiButton/BuiButton.vue        |  23 ++-
 .../test/default-disabled.output.html         |   2 +-
 .../BuiButton/test/default.output.html        |   2 +-
 .../test/secondary-disabled.output.html       |   2 +-
 .../BuiButton/test/secondary.output.html      |   2 +-
 .../BuiButton/test/text-disabled.output.html  |   2 +-
 .../BuiButton/test/text.output.html           |   2 +-
 src/components/BuiButton/types.ts             |   2 +-
 src/components/BuiInput/BuiInput.spec.ts      |   6 +-
 src/components/BuiInput/BuiInput.vue          |   7 +-
 src/components/BuiRadio/BuiRadio.vue          |   4 -
 src/components/BuiTable/BuiTable.story.vue    | 159 ++++++++++++++++++
 src/components/BuiTable/BuiTable.vue          |   7 +
 src/components/BuiTable/BuiTableBody.vue      |   7 +
 src/components/BuiTable/BuiTableCell.vue      |   7 +
 src/components/BuiTable/BuiTableFooter.vue    |   7 +
 src/components/BuiTable/BuiTableHead.vue      |   9 +
 src/components/BuiTable/BuiTableHeadCell.vue  |   7 +
 src/components/BuiTable/BuiTableRow.vue       |   7 +
 src/index.ts                                  |   7 +
 tailwind.config.ts                            |   3 +-
 21 files changed, 253 insertions(+), 21 deletions(-)
 create mode 100644 src/components/BuiTable/BuiTable.story.vue
 create mode 100644 src/components/BuiTable/BuiTable.vue
 create mode 100644 src/components/BuiTable/BuiTableBody.vue
 create mode 100644 src/components/BuiTable/BuiTableCell.vue
 create mode 100644 src/components/BuiTable/BuiTableFooter.vue
 create mode 100644 src/components/BuiTable/BuiTableHead.vue
 create mode 100644 src/components/BuiTable/BuiTableHeadCell.vue
 create mode 100644 src/components/BuiTable/BuiTableRow.vue

diff --git a/src/components/BuiButton/BuiButton.vue b/src/components/BuiButton/BuiButton.vue
index 1ea2573..b37c7e1 100644
--- a/src/components/BuiButton/BuiButton.vue
+++ b/src/components/BuiButton/BuiButton.vue
@@ -7,14 +7,16 @@ interface IBuiButtonProps {
   disabled?: boolean
   color?: ButtonColor
   size?: ButtonSize
+  classes?: string
 }
 const props = withDefaults(defineProps<IBuiButtonProps>(), {
   disabled: false,
   color: 'primary',
-  size: 'md'
+  size: 'md',
+  classes: ''
 })
 
-const baseClasses = 'font-medium rounded text-sm focus:outline-none'
+const baseClasses = 'font-medium rounded text-sm focus:outline-none flex'
 
 // Style Classes
 
@@ -45,6 +47,12 @@ const outlineButtonClasses = {
   disabled:
     'text-primary-250 border-primary-250 bg-primary-100 dark:bg-transparent hover:bg-primary-100 cursor-not-allowed dark:border-primary-590 dark:text-primary-590 dark:hover:text-primary-590'
 }
+const iconButtonClasses = {
+  base: 'bg-primary-150 dark:bg-primary-650',
+  hover: 'hover:bg-primary-150 dark:hover:bg-primary-650',
+  focus: 'dark:focus:ring-primary-300 focus:bg-primary-175',
+  disabled: 'text-primary-250 hover:bg-white cursor-not-allowed'
+}
 const colorClasses: Record<ButtonColor, string> = {
   primary: twJoin(
     primaryButtonClasses.base,
@@ -69,6 +77,12 @@ const colorClasses: Record<ButtonColor, string> = {
     outlineButtonClasses.hover,
     outlineButtonClasses.focus,
     props.disabled && outlineButtonClasses.disabled
+  ),
+  icon: twJoin(
+    iconButtonClasses.base,
+    iconButtonClasses.focus,
+    iconButtonClasses.hover,
+    props.disabled && iconButtonClasses.disabled
   )
 }
 const sizeClasses: Record<ButtonSize, string> = {
@@ -78,12 +92,13 @@ const sizeClasses: Record<ButtonSize, string> = {
 }
 
 const buttonClasses = computed(() => {
-  return twMerge(baseClasses, colorClasses[props.color], sizeClasses[props.size])
+  return twMerge(baseClasses, colorClasses[props.color], sizeClasses[props.size], props.classes)
 })
+const emit = defineEmits(['click'])
 </script>
 
 <template>
-  <button :class="buttonClasses" :disabled="disabled">
+  <button v-bind="$attrs" :class="buttonClasses" :disabled="disabled" @click="emit('click')">
     <slot name="prefix"></slot>
     <slot name="default">Primary</slot>
     <slot name="suffix"></slot>
diff --git a/src/components/BuiButton/test/default-disabled.output.html b/src/components/BuiButton/test/default-disabled.output.html
index 57c8444..36f4447 100644
--- a/src/components/BuiButton/test/default-disabled.output.html
+++ b/src/components/BuiButton/test/default-disabled.output.html
@@ -1 +1 @@
-<button class="font-medium rounded text-sm focus:outline-none py-1 px-4">Primary</button>
\ No newline at end of file
+<button class="font-medium rounded text-sm focus:outline-none flex py-1 px-4">Primary</button>
\ No newline at end of file
diff --git a/src/components/BuiButton/test/default.output.html b/src/components/BuiButton/test/default.output.html
index 57c8444..36f4447 100644
--- a/src/components/BuiButton/test/default.output.html
+++ b/src/components/BuiButton/test/default.output.html
@@ -1 +1 @@
-<button class="font-medium rounded text-sm focus:outline-none py-1 px-4">Primary</button>
\ No newline at end of file
+<button class="font-medium rounded text-sm focus:outline-none flex py-1 px-4">Primary</button>
\ No newline at end of file
diff --git a/src/components/BuiButton/test/secondary-disabled.output.html b/src/components/BuiButton/test/secondary-disabled.output.html
index 57c8444..36f4447 100644
--- a/src/components/BuiButton/test/secondary-disabled.output.html
+++ b/src/components/BuiButton/test/secondary-disabled.output.html
@@ -1 +1 @@
-<button class="font-medium rounded text-sm focus:outline-none py-1 px-4">Primary</button>
\ No newline at end of file
+<button class="font-medium rounded text-sm focus:outline-none flex py-1 px-4">Primary</button>
\ No newline at end of file
diff --git a/src/components/BuiButton/test/secondary.output.html b/src/components/BuiButton/test/secondary.output.html
index 57c8444..36f4447 100644
--- a/src/components/BuiButton/test/secondary.output.html
+++ b/src/components/BuiButton/test/secondary.output.html
@@ -1 +1 @@
-<button class="font-medium rounded text-sm focus:outline-none py-1 px-4">Primary</button>
\ No newline at end of file
+<button class="font-medium rounded text-sm focus:outline-none flex py-1 px-4">Primary</button>
\ No newline at end of file
diff --git a/src/components/BuiButton/test/text-disabled.output.html b/src/components/BuiButton/test/text-disabled.output.html
index 57c8444..36f4447 100644
--- a/src/components/BuiButton/test/text-disabled.output.html
+++ b/src/components/BuiButton/test/text-disabled.output.html
@@ -1 +1 @@
-<button class="font-medium rounded text-sm focus:outline-none py-1 px-4">Primary</button>
\ No newline at end of file
+<button class="font-medium rounded text-sm focus:outline-none flex py-1 px-4">Primary</button>
\ No newline at end of file
diff --git a/src/components/BuiButton/test/text.output.html b/src/components/BuiButton/test/text.output.html
index 57c8444..36f4447 100644
--- a/src/components/BuiButton/test/text.output.html
+++ b/src/components/BuiButton/test/text.output.html
@@ -1 +1 @@
-<button class="font-medium rounded text-sm focus:outline-none py-1 px-4">Primary</button>
\ No newline at end of file
+<button class="font-medium rounded text-sm focus:outline-none flex py-1 px-4">Primary</button>
\ No newline at end of file
diff --git a/src/components/BuiButton/types.ts b/src/components/BuiButton/types.ts
index 8c1edd9..50fe842 100644
--- a/src/components/BuiButton/types.ts
+++ b/src/components/BuiButton/types.ts
@@ -1,2 +1,2 @@
-export type ButtonColor = 'primary' | 'secondary' | 'text' | 'outline'
+export type ButtonColor = 'primary' | 'secondary' | 'text' | 'outline' | 'icon'
 export type ButtonSize = 'lg' | 'md' | 'sm'
diff --git a/src/components/BuiInput/BuiInput.spec.ts b/src/components/BuiInput/BuiInput.spec.ts
index bbd5e31..8e1bfcd 100644
--- a/src/components/BuiInput/BuiInput.spec.ts
+++ b/src/components/BuiInput/BuiInput.spec.ts
@@ -44,7 +44,7 @@ describe('BuiInput', () => {
     createComponent()
     const input = wrapper.find('input')
     expect(input.classes().join(' ')).toEqual(
-      'py-2 px-3 border border-slate-300 dark:border-gray-500 dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500'
+      'py-2 px-3 border border-slate-300 dark:border-gray-500 dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500'
     )
   })
 
@@ -52,7 +52,7 @@ describe('BuiInput', () => {
     createComponent({ propsData: { validationStatus: 'error' } })
     const input = wrapper.find('input')
     expect(input.classes().join(' ')).toEqual(
-      'py-2 px-3 border dark:border-gray-500 dark:focus:border-primary-500 bg-transparent rounded-lg focus:ring-4 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500 border-red-300 focus:border-red-300 focus:ring-red-200'
+      'py-2 px-3 border dark:border-gray-500 dark:focus:border-primary-500 bg-transparent rounded-lg focus:ring-2 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500 border-red-300 focus:border-red-300 focus:ring-red-200'
     )
   })
 
@@ -60,7 +60,7 @@ describe('BuiInput', () => {
     createComponent({ propsData: { validationStatus: 'success' } })
     const input = wrapper.find('input')
     expect(input.classes().join(' ')).toEqual(
-      'py-2 px-3 border dark:border-gray-500 dark:focus:border-primary-500 bg-transparent rounded-lg focus:ring-4 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500 border-green-300 focus:border-green-300 focus:ring-green-200'
+      'py-2 px-3 border dark:border-gray-500 dark:focus:border-primary-500 bg-transparent rounded-lg focus:ring-2 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500 border-green-300 focus:border-green-300 focus:ring-green-200'
     )
   })
 
diff --git a/src/components/BuiInput/BuiInput.vue b/src/components/BuiInput/BuiInput.vue
index e010f85..d8c6082 100644
--- a/src/components/BuiInput/BuiInput.vue
+++ b/src/components/BuiInput/BuiInput.vue
@@ -9,6 +9,7 @@
         <slot name="prefix" />
       </div>
       <input
+        v-bind="$attrs"
         v-model="model"
         :disabled="disabled"
         :required="required"
@@ -64,10 +65,12 @@ const model = computed({
 })
 
 const inputClasses = twMerge(
-  'py-2 px-3 border border-slate-300 dark:border-gray-500 dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500',
+  'py-2 px-3 border border-slate-300 dark:border-gray-500 dark:focus:border-primary-500 focus:border-primary-500 bg-transparent rounded-lg focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-550 outline-none w-full dark:text-gray-100 text-clay-500 placeholder-gray-500',
   props.validationStatus === 'success' &&
     'border-green-300 focus:border-green-300 focus:ring-green-200',
-  props.validationStatus === 'error' && 'border-red-300 focus:border-red-300 focus:ring-red-200'
+  props.validationStatus === 'error' && 'border-red-300 focus:border-red-300 focus:ring-red-200',
+  props.disabled &&
+    'bg-gray-150 placeholer:text-gray-300 dark:bg-clay-500 dark:placeholder:text-white/[.16] cursor-not-allowed'
 )
 
 const labelClasses = 'text-sm text-clay-500 font-semibold leading-6 dark:text-gray-100'
diff --git a/src/components/BuiRadio/BuiRadio.vue b/src/components/BuiRadio/BuiRadio.vue
index 5a82c26..8a9aea6 100644
--- a/src/components/BuiRadio/BuiRadio.vue
+++ b/src/components/BuiRadio/BuiRadio.vue
@@ -32,10 +32,6 @@ const disabledAttrValue = computed(() => {
   return Object.keys(props).includes('disabled') && props.disabled !== false ? true : undefined
 })
 
-const readonlyAttrValue = computed(() => {
-  return Object.keys(props).includes('readonly') && props.readonly !== false ? true : undefined
-})
-
 const baseLabelClasses = 'font-semibold leading-6 text-sm hover:cursor-pointer'
 const disabledLabelClasses = 'hover:!cursor-default text-gray-400'
 
diff --git a/src/components/BuiTable/BuiTable.story.vue b/src/components/BuiTable/BuiTable.story.vue
new file mode 100644
index 0000000..df57c58
--- /dev/null
+++ b/src/components/BuiTable/BuiTable.story.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import BuiTable from './BuiTable.vue'
+import BuiTableHeadCell from './BuiTableHeadCell.vue'
+import BuiTableRow from './BuiTableRow.vue'
+import BuiInput from '../BuiInput/BuiInput.vue'
+import BuiButton from '../BuiButton/BuiButton.vue'
+import BuiTableCell from './BuiTableCell.vue'
+import BuiTableBody from './BuiTableBody.vue'
+import BuiTableHead from './BuiTableHead.vue'
+import BuiTableFooter from './BuiTableFooter.vue'
+import BuiCheckbox from '../BuiCheckbox/BuiCheckbox.vue'
+import { ref } from 'vue'
+
+const drain = ref(false)
+const etcd = ref(false)
+const controlPlace = ref(false)
+const worker = ref(false)
+
+function click() {
+  console.log('click')
+}
+</script>
+
+<template>
+  <Story title="BuiTable">
+    <Variant title="Default" responsive-disabled>
+      <div class="p-2">
+        <BuiTable>
+          <BuiTableHead>
+            <BuiTableHeadCell>Name Prefix</BuiTableHeadCell>
+            <BuiTableHeadCell>Count</BuiTableHeadCell>
+            <BuiTableHeadCell>Drain Before Delete</BuiTableHeadCell>
+            <BuiTableHeadCell class="bg-red-100 text-red-300">Etcd</BuiTableHeadCell>
+            <BuiTableHeadCell class="bg-green-100 text-green-500">Control Plane</BuiTableHeadCell>
+            <BuiTableHeadCell>Worker</BuiTableHeadCell>
+            <BuiTableHeadCell>Resources</BuiTableHeadCell>
+            <BuiTableHeadCell>Labels</BuiTableHeadCell>
+            <BuiTableHeadCell>Delete</BuiTableHeadCell>
+          </BuiTableHead>
+          <BuiTableBody>
+            <BuiTableRow>
+              <BuiTableCell>
+                <BuiInput label="" placeholder="Name Prefix" />
+              </BuiTableCell>
+              <BuiTableCell>
+                <BuiInput
+                  label=""
+                  placeholder="Count"
+                  type="number"
+                  class="appearance-none"
+                  disabled
+                />
+              </BuiTableCell>
+              <BuiTableCell>
+                <BuiCheckbox v-model="drain" label="" class="justify-center" />
+              </BuiTableCell>
+              <BuiTableCell>
+                <BuiCheckbox v-model="etcd" label="" class="justify-center" />
+              </BuiTableCell>
+              <BuiTableCell>
+                <BuiCheckbox v-model="controlPlace" label="" class="justify-center" />
+              </BuiTableCell>
+              <BuiTableCell>
+                <BuiCheckbox v-model="worker" label="" class="justify-center" />
+              </BuiTableCell>
+              <BuiTableCell>
+                <BuiButton color="icon" classes="text-primary-500 p-4 inline-block" @click="click">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M10.128 2.35547L10.1354 2.34805L10.1425 2.34031C10.5886 1.85542 11.2004 1.55593 11.8566 1.50095C11.9692 1.49558 12.0818 1.51299 12.1876 1.55215L12.3607 1.08446L12.1876 1.55215C12.2937 1.59146 12.3909 1.65185 12.4731 1.7297L14.2875 3.54497C14.463 3.72055 14.5578 4.03462 14.4629 4.48576C14.3692 4.93123 14.0982 5.44225 13.6569 5.88839C13.6566 5.88862 13.6564 5.88884 13.6562 5.88907L5.85294 13.7159L5.85281 13.7158L5.84326 13.7259C5.67725 13.9019 5.45964 14.0204 5.22202 14.0644L1.78859 14.4987H1.68018H1.66428L1.6484 14.4997C1.62642 14.5011 1.6044 14.4973 1.58417 14.4885C1.56393 14.4797 1.54604 14.4663 1.53198 14.4492C1.51791 14.4322 1.50808 14.412 1.5033 14.3904C1.49852 14.3687 1.49894 14.3463 1.50452 14.3249L1.51247 14.2943L1.51652 14.263L1.96464 10.7959C2.00852 10.5578 2.12707 10.3398 2.30319 10.1735L2.30836 10.1687L2.3134 10.1636L10.128 2.35547ZM5.44786 13.3991L5.47628 13.3778L5.5014 13.3527L11.1974 7.654L11.5507 7.30052L11.1974 6.94705L9.06892 4.81756L8.71528 4.46376L8.36165 4.81756L2.66562 10.5162L2.60258 10.5793L2.56523 10.6602L2.50528 10.7902L2.47338 10.8593L2.46351 10.9348L2.15373 13.3043L2.06963 13.9475L2.71307 13.865L5.13138 13.5551L5.26232 13.5383L5.36791 13.4591L5.44786 13.3991ZM13.3577 5.54255L13.3578 5.54263L13.3654 5.53502C13.7131 5.18819 13.9383 4.7375 14.007 4.25121L14.0419 4.00422L13.8656 3.82779L12.1867 2.14819L12.0044 1.96578L11.7501 2.00859C11.2575 2.09152 10.8072 2.33754 10.4713 2.70693L9.42091 3.75781L9.0676 4.11128L9.42091 4.46475L11.5494 6.59425L11.895 6.93999L12.2485 6.6023L13.3577 5.54255Z"
+                      fill="currentColor"
+                      stroke="currentColor"
+                    />
+                  </svg>
+                </BuiButton>
+              </BuiTableCell>
+              <BuiTableCell>
+                <BuiButton color="icon" classes="text-primary-500 p-4 inline-block">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M10.128 2.35547L10.1354 2.34805L10.1425 2.34031C10.5886 1.85542 11.2004 1.55593 11.8566 1.50095C11.9692 1.49558 12.0818 1.51299 12.1876 1.55215L12.3607 1.08446L12.1876 1.55215C12.2937 1.59146 12.3909 1.65185 12.4731 1.7297L14.2875 3.54497C14.463 3.72055 14.5578 4.03462 14.4629 4.48576C14.3692 4.93123 14.0982 5.44225 13.6569 5.88839C13.6566 5.88862 13.6564 5.88884 13.6562 5.88907L5.85294 13.7159L5.85281 13.7158L5.84326 13.7259C5.67725 13.9019 5.45964 14.0204 5.22202 14.0644L1.78859 14.4987H1.68018H1.66428L1.6484 14.4997C1.62642 14.5011 1.6044 14.4973 1.58417 14.4885C1.56393 14.4797 1.54604 14.4663 1.53198 14.4492C1.51791 14.4322 1.50808 14.412 1.5033 14.3904C1.49852 14.3687 1.49894 14.3463 1.50452 14.3249L1.51247 14.2943L1.51652 14.263L1.96464 10.7959C2.00852 10.5578 2.12707 10.3398 2.30319 10.1735L2.30836 10.1687L2.3134 10.1636L10.128 2.35547ZM5.44786 13.3991L5.47628 13.3778L5.5014 13.3527L11.1974 7.654L11.5507 7.30052L11.1974 6.94705L9.06892 4.81756L8.71528 4.46376L8.36165 4.81756L2.66562 10.5162L2.60258 10.5793L2.56523 10.6602L2.50528 10.7902L2.47338 10.8593L2.46351 10.9348L2.15373 13.3043L2.06963 13.9475L2.71307 13.865L5.13138 13.5551L5.26232 13.5383L5.36791 13.4591L5.44786 13.3991ZM13.3577 5.54255L13.3578 5.54263L13.3654 5.53502C13.7131 5.18819 13.9383 4.7375 14.007 4.25121L14.0419 4.00422L13.8656 3.82779L12.1867 2.14819L12.0044 1.96578L11.7501 2.00859C11.2575 2.09152 10.8072 2.33754 10.4713 2.70693L9.42091 3.75781L9.0676 4.11128L9.42091 4.46475L11.5494 6.59425L11.895 6.93999L12.2485 6.6023L13.3577 5.54255Z"
+                      fill="currentColor"
+                      stroke="currentColor"
+                    />
+                  </svg>
+                </BuiButton>
+              </BuiTableCell>
+              <BuiTableCell>
+                <BuiButton
+                  color="icon"
+                  classes="text-red-300 bg-red-300/[.08] hover:bg-red-300/[.16] focus:bg-red-300/[.3] p-4 inline-block"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M9.53234 11.084V11.0839V11.084ZM14.2541 5.17325H14.254H13.7567H13.3405L13.265 5.58256L11.694 14.0997C11.6715 14.2139 11.6098 14.3165 11.5197 14.3896C11.4292 14.463 11.3159 14.502 11.1998 14.4999L11.1998 14.4998H11.1906H4.90471V14.4998L4.89561 14.4999C4.77945 14.502 4.66615 14.463 4.57566 14.3896C4.4857 14.3166 4.42399 14.2142 4.40146 14.1001L2.84047 5.5338L2.76569 5.12343H2.34857H1.82143H1.79226L1.7633 5.12682C1.73035 5.13068 1.69695 5.12751 1.66528 5.11751C1.63362 5.1075 1.60436 5.09088 1.57945 5.06867C1.55454 5.04646 1.53454 5.01916 1.52082 4.98854C1.50711 4.95791 1.5 4.92469 1.5 4.89106C1.5 4.85742 1.50711 4.8242 1.52082 4.79358C1.53454 4.76295 1.55454 4.73566 1.57945 4.71345C1.60436 4.69124 1.63362 4.67461 1.66528 4.66461C1.69695 4.6546 1.73035 4.65143 1.7633 4.65529L1.79226 4.65868H1.82143H4.86493H5.33186L5.36376 4.19284C5.41182 3.49111 5.71291 2.83098 6.21068 2.33542C6.70121 1.84707 7.34976 1.55137 8.03847 1.50109C8.7287 1.54943 9.37929 1.84429 9.87157 2.33284C10.3711 2.82858 10.6734 3.48982 10.7217 4.19293L10.7536 4.65868H11.2205H14.2043H14.2247L14.245 4.65703C14.2771 4.6544 14.3095 4.65844 14.3401 4.66891C14.3706 4.67937 14.3988 4.69606 14.4228 4.71797C14.4467 4.73988 14.466 4.76656 14.4793 4.79637C14.4924 4.82562 14.4994 4.85725 14.5 4.88934V4.93166C14.4985 4.99609 14.4721 5.05727 14.4265 5.10231C14.3804 5.14787 14.3185 5.17326 14.2541 5.17325ZM12.7266 5.78429L12.8362 5.19318H12.235H3.87032H3.26915L3.37869 5.78429L4.82088 13.5664L4.89665 13.9753H5.3125H10.7928H11.2087L11.2844 13.5664L12.7266 5.78429ZM5.86904 4.11135L5.81699 4.65868H6.36679H9.73852H10.2892L10.2362 4.11056C10.1828 3.55829 9.93863 3.04186 9.54563 2.65044C9.1526 2.25899 8.63536 2.01714 8.08311 1.96681L8.03368 1.96231L7.98434 1.96761C7.43886 2.0262 6.93048 2.2717 6.5451 2.66238C6.15974 3.05305 5.921 3.56491 5.86904 4.11135Z"
+                      fill="currentColor"
+                      stroke="currentColor"
+                    />
+                  </svg>
+                </BuiButton>
+              </BuiTableCell>
+            </BuiTableRow>
+          </BuiTableBody>
+          <BuiTableFooter>
+            <BuiTableRow>
+              <BuiTableCell
+                colspan="2"
+                class="!text-left text-base font-semibold text-clay-500/[.32]"
+              >
+                Numbers of nodes required:
+              </BuiTableCell>
+              <BuiTableCell
+                class="border-r border-primary-500/[0.16] text-clay-500/[.32] font-semibold"
+              >
+                1 / >
+              </BuiTableCell>
+              <BuiTableCell
+                class="border-r border-primary-500/[0.16] whitespace-nowrap text-red-300 font-semibold bg-red-100"
+              >
+                1 / 3 / 5
+              </BuiTableCell>
+              <BuiTableCell
+                class="border-r border-primary-500/[0.16] text-clay-500/[.32] bg-green-100 text-green-500 font-semibold"
+              >
+                1 / >
+              </BuiTableCell>
+              <BuiTableCell
+                class="border-r border-primary-500/[0.16] text-clay-500/[.32] font-semibold"
+              >
+                1 / >
+              </BuiTableCell>
+              <BuiTableCell class="border-primary-500/[0.16] text-clay-500/[.32]"></BuiTableCell>
+              <BuiTableCell class="border-primary-500/[0.16] text-clay-500/[.32]"></BuiTableCell>
+              <BuiTableCell class="border-primary-500/[0.16] text-clay-500/[.32]"></BuiTableCell>
+            </BuiTableRow>
+          </BuiTableFooter>
+        </BuiTable>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/src/components/BuiTable/BuiTable.vue b/src/components/BuiTable/BuiTable.vue
new file mode 100644
index 0000000..dab3f1a
--- /dev/null
+++ b/src/components/BuiTable/BuiTable.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <table class="w-full border border-primary-500/[.16] rounded">
+    <slot />
+  </table>
+</template>
diff --git a/src/components/BuiTable/BuiTableBody.vue b/src/components/BuiTable/BuiTableBody.vue
new file mode 100644
index 0000000..e441be4
--- /dev/null
+++ b/src/components/BuiTable/BuiTableBody.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <tbody>
+    <slot />
+  </tbody>
+</template>
diff --git a/src/components/BuiTable/BuiTableCell.vue b/src/components/BuiTable/BuiTableCell.vue
new file mode 100644
index 0000000..bed2cd4
--- /dev/null
+++ b/src/components/BuiTable/BuiTableCell.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <td class="p-4 text-center first:pl-10 last:pr-10">
+    <slot />
+  </td>
+</template>
diff --git a/src/components/BuiTable/BuiTableFooter.vue b/src/components/BuiTable/BuiTableFooter.vue
new file mode 100644
index 0000000..27db9bf
--- /dev/null
+++ b/src/components/BuiTable/BuiTableFooter.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <tfoot class="bg-primary-500/[.04] border border-primary-500/[0.16]">
+    <slot />
+  </tfoot>
+</template>
diff --git a/src/components/BuiTable/BuiTableHead.vue b/src/components/BuiTable/BuiTableHead.vue
new file mode 100644
index 0000000..935151b
--- /dev/null
+++ b/src/components/BuiTable/BuiTableHead.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <thead class="bg-clay-500/[.03] text-clay-500 text-base leading-6">
+    <tr class="cell-border whitespace-nowrap">
+      <slot />
+    </tr>
+  </thead>
+</template>
diff --git a/src/components/BuiTable/BuiTableHeadCell.vue b/src/components/BuiTable/BuiTableHeadCell.vue
new file mode 100644
index 0000000..8596c63
--- /dev/null
+++ b/src/components/BuiTable/BuiTableHeadCell.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <th class="p-4 font-semibold first:pl-10 last:pr-10 border border-primary-500/[0.16]">
+    <slot />
+  </th>
+</template>
diff --git a/src/components/BuiTable/BuiTableRow.vue b/src/components/BuiTable/BuiTableRow.vue
new file mode 100644
index 0000000..5e047a2
--- /dev/null
+++ b/src/components/BuiTable/BuiTableRow.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <tr>
+    <slot />
+  </tr>
+</template>
diff --git a/src/index.ts b/src/index.ts
index 69753e7..d52b364 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,3 +11,10 @@ export { default as BuiModal } from './components/BuiModal/BuiModal.vue'
 export { default as BuiRadio } from './components/BuiRadio/BuiRadio.vue'
 export { default as BuiCheckbox } from './components/BuiCheckbox/BuiCheckbox.vue'
 export { default as BuiAccordion } from './components/BuiAccordion/BuiAccordion.vue'
+export { default as BuiTable } from './components/BuiTable/BuiTable.vue'
+export { default as BuiTableBody } from './components/BuiTable/BuiTableBody.vue'
+export { default as BuiTableCell } from './components/BuiTable/BuiTableCell.vue'
+export { default as BuiTableFooter } from './components/BuiTable/BuiTableFooter.vue'
+export { default as BuiTableHead } from './components/BuiTable/BuiTableHead.vue'
+export { default as BuiTableHeadCell } from './components/BuiTable/BuiTableHeadCell.vue'
+export { default as BuiTableRow } from './components/BuiTable/BuiTableRow.vue'
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e416c56..e1d7f6d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -49,7 +49,8 @@ module.exports = {
           300: '#E05FA3'
         },
         green: {
-          300: '#12D480'
+          300: '#12D480',
+          500: '#418485'
         }
       },
       borderRadius: {