diff --git a/package-lock.json b/package-lock.json
index 6bfae02d0..ae075796c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15815,6 +15815,11 @@
                 "node": ">=8"
             }
         },
+        "node_modules/sortablejs": {
+            "version": "1.14.0",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+            "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+        },
         "node_modules/source-map": {
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -17483,6 +17488,17 @@
                 "typescript": "*"
             }
         },
+        "node_modules/vuedraggable": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+            "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+            "dependencies": {
+                "sortablejs": "1.14.0"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.1"
+            }
+        },
         "node_modules/w3c-xmlserializer": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -18039,7 +18055,8 @@
             "dependencies": {
                 "@vueuse/core": "^10.9.0",
                 "lodash-es": "^4.17.21",
-                "nanoid": "^5.0.7"
+                "nanoid": "^5.0.7",
+                "vuedraggable": "^4.1.0"
             },
             "devDependencies": {
                 "@chromatic-com/storybook": "^1.3.2",
diff --git a/packages/vlossom/package.json b/packages/vlossom/package.json
index b8fc9a095..e4744123b 100644
--- a/packages/vlossom/package.json
+++ b/packages/vlossom/package.json
@@ -89,6 +89,7 @@
     "dependencies": {
         "@vueuse/core": "^10.9.0",
         "lodash-es": "^4.17.21",
+        "vuedraggable": "^4.1.0",
         "nanoid": "^5.0.7"
     }
 }
diff --git a/packages/vlossom/src/components/index.ts b/packages/vlossom/src/components/index.ts
index 7b82004b3..287a0496f 100644
--- a/packages/vlossom/src/components/index.ts
+++ b/packages/vlossom/src/components/index.ts
@@ -94,6 +94,9 @@ export { default as VsStepper } from './vs-stepper/VsStepper.vue';
 export { type VsSwitchStyleSet } from './vs-switch/types';
 export { default as VsSwitch } from './vs-switch/VsSwitch.vue';
 
+export { type VsTableStyleSet } from './vs-table/types';
+export { default as VsTable } from './vs-table/VsTable.vue';
+
 export { type VsTabsStyleSet } from './vs-tabs/types';
 export { default as VsTabs } from './vs-tabs/VsTabs.vue';
 
@@ -150,6 +153,7 @@ declare module 'vue' {
         VsSelect: typeof import('./')['VsSelect'];
         VsStepper: typeof import('./')['VsStepper'];
         VsSwitch: typeof import('./')['VsSwitch'];
+        VsTable: typeof import('./')['VsTable'];
         VsTabs: typeof import('./')['VsTabs'];
         VsTextarea: typeof import('./')['VsTextarea'];
         VsTextWrap: typeof import('./')['VsTextWrap'];
diff --git a/packages/vlossom/src/components/vs-select/VsSelect.vue b/packages/vlossom/src/components/vs-select/VsSelect.vue
index dca1ee0f3..977684b56 100644
--- a/packages/vlossom/src/components/vs-select/VsSelect.vue
+++ b/packages/vlossom/src/components/vs-select/VsSelect.vue
@@ -62,6 +62,7 @@
                     :id="id"
                     role="combobox"
                     :aria-expanded="isOpen || isVisible"
+                    :aria-label="ariaLabel"
                     aria-controls="vs-select-options"
                     :aria-autocomplete="autocomplete ? 'list' : undefined"
                     :aria-activedescendant="focusedOptionId"
@@ -220,6 +221,7 @@ export default defineComponent({
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsSelectStyleSet> },
+        ariaLabel: { type: String, default: '' },
         autocomplete: { type: Boolean, default: false },
         closableChips: {
             type: Boolean,
diff --git a/packages/vlossom/src/components/vs-select/__tests__/vs-select.test.ts b/packages/vlossom/src/components/vs-select/__tests__/vs-select.test.ts
index 90f8f120c..c613d327d 100644
--- a/packages/vlossom/src/components/vs-select/__tests__/vs-select.test.ts
+++ b/packages/vlossom/src/components/vs-select/__tests__/vs-select.test.ts
@@ -767,6 +767,20 @@ describe('vs-select', () => {
         });
     });
 
+    describe('aria-label', () => {
+        it('aria-label을 설정할 수 있다', () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsSelect, {
+                props: {
+                    ariaLabel: 'aria-label',
+                },
+            });
+
+            // then
+            expect(wrapper.find('input').attributes('aria-label')).toBe('aria-label');
+        });
+    });
+
     describe('focus / blur', () => {
         it('focus 이벤트를 발생시킬 수 있다', async () => {
             // given
diff --git a/packages/vlossom/src/components/vs-table/VsTable.scss b/packages/vlossom/src/components/vs-table/VsTable.scss
new file mode 100644
index 000000000..bc90b256f
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/VsTable.scss
@@ -0,0 +1,314 @@
+@use '@/styles/mixin' as *;
+
+.vs-table .table-wrap {
+    width: 100%;
+    overflow-x: auto;
+
+    table {
+        min-width: 100%;
+
+        caption {
+            caption-side: top;
+            text-align: center;
+            padding-bottom: 1rem;
+            font-weight: bold;
+            font-size: 1.2rem;
+            color: var(--vs-font-color);
+        }
+
+        tr {
+            display: grid;
+            justify-content: flex-start;
+            overflow: hidden;
+
+            th,
+            td {
+                display: flex;
+                align-items: center;
+                padding: 0.4rem 1.2rem;
+                text-align: left;
+
+                .table-data {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    height: 100%;
+                    overflow-x: auto;
+                }
+            }
+        }
+
+        thead tr {
+            background-color: var(--vs-comp-backgroundColor);
+
+            th {
+                color: var(--vs-comp-color);
+                height: 3.6rem;
+                font-size: 1.1rem;
+                font-weight: 700;
+
+                &.draggable-th,
+                &.expandable-th {
+                    visibility: hidden;
+                }
+
+                &.selectable-th {
+                    color: transparent;
+                }
+
+                &.table-th:first-of-type {
+                    padding-left: 2rem;
+                }
+            }
+        }
+
+        tbody tr {
+            position: relative;
+            transition: background-color 0.2s;
+            border-bottom: 1px solid var(--vs-grey-200);
+            color: var(--vs-font-color);
+
+            &.selected {
+                background-color: var(--vs-blue-100);
+                color: var(--vs-blue-800);
+            }
+
+            td {
+                min-height: 4.8rem;
+                font-size: 1.1rem;
+
+                &.draggable-td {
+                    padding-right: 0;
+                }
+
+                &.table-td:first-of-type {
+                    padding-left: 2rem;
+                }
+
+                &.expandable-td {
+                    padding-left: 0;
+
+                    > button {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 1.6rem;
+                        height: 1.6rem;
+                        border-radius: 0.2rem;
+                        background-color: var(--vs-comp-backgroundColor);
+
+                        i {
+                            color: var(--vs-comp-color);
+                            pointer-events: none;
+                            transform: rotate(180deg);
+                            transition: transform 0.4s;
+                        }
+
+                        &.expanded {
+                            i {
+                                transform: rotate(0deg);
+                            }
+                        }
+
+                        &:hover {
+                            box-shadow: 0 0 4px var(--vs-comp-backgroundColor);
+                        }
+
+                        &:disabled {
+                            @include disabled;
+                        }
+                    }
+                }
+
+                &.expanded-row-content {
+                    display: grid;
+                    grid-column: 1/-1;
+                    padding: 0 1rem;
+                    border-top: 1px dashed var(--vs-line-color);
+                    border-left: 1px dashed var(--vs-line-color);
+                    border-right: 1px dashed var(--vs-line-color);
+                    font-size: 1.1rem;
+                    box-shadow: var(--vs-table-expand-box-shadow-up), var(--vs-table-expand-box-shadow-down);
+                }
+
+                .skeleton {
+                    width: 95%;
+                    height: 60%;
+                    border-radius: 0.4rem;
+                    background-color: var(--vs-grey-200);
+                    animation: skeleton-loading 0.6s infinite alternate;
+                }
+            }
+        }
+
+        tbody tr:not(.skeleton) td.draggable-td {
+            cursor: grab;
+            &:active {
+                cursor: grabbing;
+            }
+        }
+
+        tbody tr:not(.skeleton):hover::after {
+            content: '';
+            box-sizing: border-box;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            background-color: var(--vs-area-backgroundColor);
+            pointer-events: none;
+        }
+
+        .table-empty {
+            border-bottom: 1px solid var(--vs-grey-200);
+            padding: 4.8rem 0;
+            font-weight: 400;
+            text-align: center;
+            opacity: 0.4;
+
+            p {
+                font-weight: 500;
+                font-size: 2rem;
+            }
+        }
+    }
+}
+
+.table-pagination {
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 0.2rem 0;
+
+    .pagination-options {
+        width: 10rem;
+        height: 100%;
+    }
+}
+
+.vs-table.dense .table-wrap table {
+    tr {
+        th,
+        td {
+            padding: 0.1rem 1.2rem;
+        }
+    }
+
+    thead tr {
+        th {
+            height: 3.2rem;
+        }
+    }
+
+    tbody tr {
+        td {
+            min-height: 3.2rem;
+        }
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .vs-table .table-wrap {
+        margin-bottom: 2rem;
+
+        table thead tr {
+            grid-template-columns: none !important;
+            th:not(:first-child) {
+                display: none;
+            }
+            th:first-child {
+                color: transparent;
+                height: 3.2rem;
+            }
+            margin-bottom: 0.8rem;
+            border: 1px solid var(--vs-line-color);
+        }
+
+        table {
+            display: flex;
+            flex-direction: column;
+        }
+
+        table tbody tr {
+            display: flex !important;
+            flex-direction: column;
+            margin: 0.8rem 0 0 0;
+            border: 1px solid var(--vs-line-color);
+
+            &:first-of-type {
+                margin-top: 0;
+            }
+
+            td {
+                display: flex;
+                justify-content: space-between;
+                padding: 0.8rem 1.2rem !important;
+                border-top: 1px dashed var(--vs-line-color);
+                overflow-x: auto;
+
+                &::before {
+                    content: attr(data-label);
+                    color: var(--vs-comp-color);
+                    display: block;
+                    line-height: 3rem;
+                    margin-right: 1.4rem;
+                    font-size: 1.1rem;
+                    font-weight: 700;
+                }
+
+                &:first-child {
+                    border-top: none;
+                }
+
+                &.expandable-td,
+                &.expanded-row-content {
+                    min-height: auto;
+                    &::before {
+                        display: none;
+                    }
+                }
+                &.expanded-row-content {
+                    border-top: none;
+                }
+
+                &.expandable-td {
+                    button {
+                        flex: 1;
+                    }
+                }
+
+                &.expanded-row-content {
+                    display: flex !important;
+                    padding-top: 0;
+                    padding-bottom: 1.2rem;
+
+                    .expand-contents {
+                        flex: 1;
+                    }
+                }
+
+                .skeleton {
+                    height: 2.8rem;
+                }
+            }
+        }
+
+        .table-empty {
+            border-top: 1px solid var(--vs-grey-200);
+        }
+    }
+}
+
+@keyframes skeleton-loading {
+    0% {
+        opacity: 0.2;
+    }
+
+    100% {
+        opacity: 0.4;
+    }
+}
diff --git a/packages/vlossom/src/components/vs-table/VsTable.vue b/packages/vlossom/src/components/vs-table/VsTable.vue
new file mode 100644
index 000000000..f6ba01592
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/VsTable.vue
@@ -0,0 +1,332 @@
+<template>
+    <div :class="['vs-table', `vs-${computedColorScheme}`, dense ? 'dense' : '']" :style="computedStyleSet">
+        <div class="table-wrap">
+            <table>
+                <caption v-if="caption">{{ caption }}</caption>
+                <vs-table-header
+                    :headers="headers"
+                    :draggable="canDrag"
+                    :expandable="hasExpand"
+                    :selectable="hasSelectable"
+                    :loading="loading"
+                    :tr-style="trStyle"
+                    v-model:sort-types="sortTypes"
+                >
+                    <template #check>
+                        <vs-checkbox-node
+                            class="select-all"
+                            v-if="!loading"
+                            :id="utils.string.createID()"
+                            type="checkbox"
+                            :color-scheme="colorScheme"
+                            :checked="isSelectedAll"
+                            aria-label="select-all"
+                            @toggle="onToggleCheck"
+                        />
+                    </template>
+                    <template v-for="(_, name) in headerSlots" #[name]="slotData">
+                        <slot :name="name" v-bind="slotData || {}" />
+                    </template>
+                </vs-table-header>
+                <vs-table-body
+                    ref="tableBodyRef"
+                    :items="items"
+                    :headers="headers"
+                    :filter="filter"
+                    :draggable="canDrag"
+                    :hasExpand="hasExpand"
+                    :rows="rows"
+                    :loading="loading"
+                    :search="search"
+                    :searchable-keys="searchableKeys"
+                    :selectable="hasSelectable"
+                    :selected-items="selectedItems"
+                    :sort-types="sortTypes"
+                    :pagination="pagination"
+                    :innerPage="innerPage"
+                    :innerItemsPerPage="innerItemsPerPage"
+                    :totalLength="totalLength"
+                    :tr-style="trStyle"
+                    v-model:is-selected-all="isSelectedAll"
+                    v-model:total-items-length="totalItemsLength"
+                    @change:selected-items="emitSelectedItems"
+                    @change:paged-items="emitPagedItems"
+                    @change:total-items="emitTotalItems"
+                >
+                    <template v-for="(_, name) in itemSlots" #[name]="slotData">
+                        <slot :name="name" v-bind="slotData || {}" />
+                    </template>
+                </vs-table-body>
+            </table>
+        </div>
+        <div class="table-pagination" v-if="pagination">
+            <vs-pagination
+                v-model="innerPage"
+                :disabled="paginationLength <= 1 || loading"
+                :length="paginationLength"
+                :edgeButtons="pageEdgeButtons"
+                :color-scheme="colorScheme"
+            />
+            <div class="pagination-options">
+                <vs-select
+                    v-model="innerItemsPerPage"
+                    :options="paginationOptions"
+                    :disabled="loading"
+                    :color-scheme="colorScheme"
+                    aria-label="pagination-options"
+                    option-label="label"
+                    option-value="value"
+                    no-clear
+                    no-label
+                    no-message
+                    dense
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { ComputedRef, PropType, Ref, computed, defineComponent, ref, toRefs, watch } from 'vue';
+import { useColorScheme, useStyleSet } from '@/composables';
+import { VsComponent, type ColorScheme, LabelValue } from '@/declaration';
+import { utils } from '@/utils';
+
+import VsTableHeader from './VsTableHeader.vue';
+import VsTableBody from './VsTableBody.vue';
+import VsPagination from '@/components/vs-pagination/VsPagination.vue';
+import VsSelect from '@/components/vs-select/VsSelect.vue';
+import { VsCheckboxNode } from '@/nodes';
+
+import type { VsTableStyleSet, TableHeader, TableRow, TableFilter, SortType } from './types';
+import { DEFAULT_TABLE_ITEMS_PER_PAGE, DEFAULT_TABLE_PAGE_COUNT } from './constant';
+
+const name = VsComponent.VsTable;
+
+export default defineComponent({
+    name,
+    components: {
+        VsTableHeader,
+        VsTableBody,
+        VsCheckboxNode,
+        VsPagination,
+        VsSelect,
+    },
+    props: {
+        colorScheme: { type: String as PropType<ColorScheme> },
+        styleSet: { type: [String, Object] as PropType<string | VsTableStyleSet>, default: '' },
+        caption: { type: String, default: '' },
+        dense: { type: Boolean, default: false },
+        draggable: { type: Boolean, default: false },
+        filter: {
+            type: Object as PropType<TableFilter>,
+            default: null,
+        },
+        headers: { type: Array as PropType<TableHeader[]>, required: true },
+        items: { type: Array as PropType<any[]>, default: () => [] as any[], required: true },
+        rows: { type: Object as PropType<TableRow>, default: () => ({}) },
+        loading: { type: Boolean, default: false },
+        pagination: { type: Boolean, default: false },
+        paginationOptions: {
+            type: Array as PropType<LabelValue<number>[]>,
+            default: () => DEFAULT_TABLE_PAGE_COUNT,
+        },
+        pageEdgeButtons: { type: Boolean, default: false },
+        search: { type: String, default: '' },
+        searchableKeys: { type: Array as PropType<string[]>, default: () => [] as string[] },
+        selectable: { type: Boolean, default: false },
+        totalLength: { type: Number },
+        // v-model
+        itemsPerPage: { type: Number, default: DEFAULT_TABLE_ITEMS_PER_PAGE },
+        page: { type: Number, default: 1 },
+        pagedItems: {
+            type: Array as PropType<any[]>,
+            default: () => [] as any[],
+        },
+        selectedItems: {
+            type: Array as PropType<any[]>,
+            default: () => [] as any[],
+        },
+        totalItems: {
+            type: Array as PropType<any[]>,
+            default: () => [] as any[],
+        },
+    },
+    emits: ['update:itemsPerPage', 'update:page', 'update:pagedItems', 'update:selectedItems', 'update:totalItems'],
+    expose: ['expand'],
+    setup(props, { slots, emit }) {
+        const {
+            colorScheme,
+            styleSet,
+            draggable,
+            headers,
+            selectable,
+            itemsPerPage,
+            page,
+            pagination,
+            paginationOptions,
+            rows,
+            totalLength,
+        } = toRefs(props);
+
+        const { computedColorScheme } = useColorScheme(name, colorScheme);
+
+        const { computedStyleSet } = useStyleSet<VsTableStyleSet>(name, styleSet);
+
+        const headerSlots = computed(() => {
+            return Object.keys(slots).reduce(
+                (acc, slotName) => {
+                    if (slotName.startsWith('header-')) {
+                        acc[slotName] = slots[slotName];
+                    }
+                    return acc;
+                },
+                {} as { [key: string]: any },
+            );
+        });
+
+        const itemSlots = computed(() => {
+            return Object.keys(slots).reduce(
+                (acc, slotName) => {
+                    if (slotName.startsWith('item-') || slotName === 'expand') {
+                        acc[slotName] = slots[slotName];
+                    }
+                    return acc;
+                },
+                {} as { [key: string]: any },
+            );
+        });
+
+        const canDrag = computed(() => {
+            return draggable.value && !pagination.value;
+        });
+
+        const hasSelectable = computed(() => {
+            return selectable.value || !!rows.value?.selectable;
+        });
+
+        const trStyle: ComputedRef<{ [key: string]: any }> = computed(() => {
+            if (!headers.value) {
+                return {};
+            }
+            const gridColumns = headers.value.map((h) => {
+                return h.width || 'minmax(20rem, 1fr)';
+            });
+            if (hasSelectable.value) {
+                gridColumns.unshift('4.8rem');
+            }
+            if (canDrag.value) {
+                gridColumns.unshift('3rem');
+            }
+            if (hasExpand.value) {
+                gridColumns.push('4.4rem');
+            }
+            return { gridTemplateColumns: gridColumns.join(' ') };
+        });
+
+        const isSelectedAll = ref(false);
+
+        function onToggleCheck(check: boolean) {
+            isSelectedAll.value = check;
+        }
+
+        const sortTypes: Ref<{ [key: string]: SortType }> = ref({});
+
+        const hasExpand = computed(() => !!slots['expand']);
+        const tableBodyRef: Ref<typeof VsTableBody | null> = ref(null);
+
+        const expand = (index: number) => {
+            return tableBodyRef.value?.expand(index);
+        };
+
+        const innerPage = ref(-1);
+        const innerItemsPerPage = ref(-1);
+        const totalItemsLength = ref(0);
+
+        const paginationLength = computed(() => {
+            if (innerItemsPerPage.value === -1) {
+                return 1;
+            }
+            const length = totalLength.value || totalItemsLength.value;
+            return Math.ceil(length / innerItemsPerPage.value) || 1;
+        });
+
+        watch(innerPage, (p: number) => {
+            isSelectedAll.value = false;
+            emitSelectedItems([]);
+            emit('update:page', p);
+        });
+
+        watch(
+            page,
+            (p: number) => {
+                if (p <= 0) {
+                    innerPage.value = 1;
+                } else if (p > paginationLength.value) {
+                    innerPage.value = paginationLength.value;
+                } else {
+                    innerPage.value = p;
+                }
+            },
+            { immediate: true },
+        );
+
+        watch(innerItemsPerPage, (p: number) => {
+            isSelectedAll.value = false;
+            emitSelectedItems([]);
+            emit('update:itemsPerPage', p);
+        });
+
+        watch(
+            itemsPerPage,
+            (ipp: number) => {
+                const optionValues = paginationOptions.value.map((o) => o.value);
+                if (optionValues.includes(ipp)) {
+                    innerItemsPerPage.value = ipp;
+                } else {
+                    innerItemsPerPage.value = paginationOptions.value[0].value;
+                }
+            },
+            { immediate: true },
+        );
+
+        function emitSelectedItems(items: any[]) {
+            emit('update:selectedItems', items);
+        }
+
+        function emitPagedItems(items: any[]) {
+            emit('update:pagedItems', items);
+        }
+
+        function emitTotalItems(items: any[]) {
+            emit('update:totalItems', items);
+        }
+
+        return {
+            computedColorScheme,
+            computedStyleSet,
+            headerSlots,
+            itemSlots,
+            trStyle,
+            sortTypes,
+            hasExpand,
+            isSelectedAll,
+            utils,
+            innerPage,
+            innerItemsPerPage,
+            paginationLength,
+            totalItemsLength,
+            canDrag,
+            hasSelectable,
+            onToggleCheck,
+            emitSelectedItems,
+            emitPagedItems,
+            emitTotalItems,
+            // expose
+            expand,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped src="./VsTable.scss" />
diff --git a/packages/vlossom/src/components/vs-table/VsTableBody.vue b/packages/vlossom/src/components/vs-table/VsTableBody.vue
new file mode 100644
index 000000000..7b0367ed9
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/VsTableBody.vue
@@ -0,0 +1,248 @@
+<template>
+    <draggable
+        tag="tbody"
+        v-model="computedTableItems"
+        item-key="id"
+        handle=".handle"
+        :disabled="!draggable || loading"
+    >
+        <template #item="{ element, index }">
+            <vs-table-body-row
+                :item="element"
+                :headers="headers"
+                :draggable="draggable"
+                :expandable="hasExpand"
+                :selectable="selectable"
+                :expanded="isExpanded(element.id)"
+                :selected="isSelected(element.id)"
+                :rows="rows"
+                :loading="loading"
+                :row-index="index"
+                :tr-style="trStyle"
+                @click="emitRowClick(element, index)"
+                @toggleExpand="toggleExpand"
+            >
+                <template #check>
+                    <vs-checkbox-node
+                        :id="element.id"
+                        type="checkbox"
+                        :color-scheme="colorScheme"
+                        :checked="isSelected(element.id)"
+                        aria-label="select"
+                        @toggle="(e) => toggleSelect(e, element.id)"
+                    />
+                </template>
+                <template v-for="(_, name) in $slots" #[name]="slotData">
+                    <slot :name="name" v-bind="slotData || {}" />
+                </template>
+            </vs-table-body-row>
+        </template>
+    </draggable>
+    <tbody v-if="loading && computedTableItems.length === 0">
+        <vs-table-body-row
+            v-for="(dummy, index) in dummyTableItems"
+            :key="dummy.id"
+            :item="dummy"
+            :headers="headers"
+            :draggable="draggable"
+            :loading="loading"
+            :row-index="index"
+            :tr-style="trStyle"
+        />
+    </tbody>
+    <tbody v-if="!loading && computedTableItems.length === 0">
+        <slot name="empty">
+            <div class="table-empty">
+                <vs-icon size="6rem" icon="noData"></vs-icon>
+                <p>NO DATA</p>
+            </div>
+        </slot>
+    </tbody>
+</template>
+
+<script lang="ts">
+import draggable from 'vuedraggable';
+import { computed, ComputedRef, defineComponent, PropType, ref, Ref, toRefs, watch, WritableComputedRef } from 'vue';
+import VsTableBodyRow from './VsTableBodyRow.vue';
+import { useTableSearch } from './composables/useTableSearch';
+import { useTableFilter } from './composables/useTableFilter';
+import { useTableSort } from './composables/useTableSort';
+import { useTableExpand } from './composables/useTableExpand';
+import { useTableSelect } from './composables/useTableSelect';
+import { VsIcon } from '@/icons';
+import { VsCheckboxNode } from '@/nodes';
+import { utils } from '@/utils';
+
+import type { ColorScheme } from '@/declaration';
+import type { TableHeader, TableItem, TableFilter, SortType, TableRow } from './types';
+import { useTablePagination } from './composables/useTablePagination';
+
+export default defineComponent({
+    name: 'vs-table-body',
+    components: {
+        draggable,
+        VsTableBodyRow,
+        VsIcon,
+        VsCheckboxNode,
+    },
+    props: {
+        colorScheme: { type: String as PropType<ColorScheme> },
+        draggable: { type: Boolean, default: false },
+        expandedIds: { type: Array as PropType<string[]>, default: () => [] },
+        filter: {
+            type: Object as PropType<TableFilter>,
+            default: null,
+        },
+        hasExpand: { type: Boolean, default: false },
+        headers: { type: Array as PropType<TableHeader[]>, required: true },
+        items: { type: Array as PropType<any[]>, default: () => [] as any[], required: true },
+        innerPage: { type: Number, default: -1 },
+        innerItemsPerPage: { type: Number, default: -1 },
+        loading: { type: Boolean, default: false },
+        pagination: { type: Boolean, default: false },
+        rows: { type: Object as PropType<TableRow>, default: () => ({}) },
+        search: { type: String, default: '' },
+        searchableKeys: { type: Array as PropType<string[]>, default: () => [] as string[] },
+        selectable: { type: Boolean, default: false },
+        selectedItems: {
+            type: Array as PropType<any[]>,
+            default: () => [] as any[],
+        },
+        sortTypes: {
+            type: Object as PropType<{ [key: string]: SortType }>,
+            default: () => ({}),
+        },
+        trStyle: {
+            type: Object as PropType<{ [key: string]: any }>,
+            default: () => ({}),
+        },
+        totalLength: { type: Number, default: 0 },
+        // v-model
+        isSelectedAll: { type: Boolean, default: false },
+        totalItemsLength: { type: Number, default: 0 },
+    },
+    emits: [
+        'rowClick',
+        'toggleExpand',
+        'change:selectedItems',
+        'change:totalItems',
+        'change:pagedItems',
+        'update:isSelectedAll',
+        'update:totalItemsLength',
+    ],
+    expose: ['expand'],
+    setup(props, ctx) {
+        const {
+            headers,
+            items,
+            search,
+            searchableKeys,
+            filter,
+            sortTypes,
+            hasExpand,
+            isSelectedAll,
+            rows,
+            selectable,
+            selectedItems,
+            pagination,
+            innerPage,
+            innerItemsPerPage,
+            totalLength,
+        } = toRefs(props);
+
+        const innerItems: Ref<any[]> = ref([]);
+        const innerTableItems: ComputedRef<TableItem[]> = computed(() => {
+            const itemArr = innerItems.value || [];
+            return itemArr.map((item: any) => {
+                return { id: utils.string.createID(), data: item };
+            });
+        });
+
+        const { getSearchedTableItems } = useTableSearch(headers, searchableKeys);
+        const { getFilteredTableItems } = useTableFilter();
+        const { getSortedTableItems } = useTableSort();
+        const { getPagedTableItems } = useTablePagination();
+
+        function getResultTableItems() {
+            const searched = getSearchedTableItems(innerTableItems.value, search);
+            const filtered = getFilteredTableItems(searched, filter);
+            const sorted = getSortedTableItems(filtered, sortTypes);
+            return sorted;
+        }
+
+        const computedTableItems: WritableComputedRef<TableItem[]> = computed({
+            get(): TableItem[] {
+                const resultTableItems = getResultTableItems();
+                const pagedTableItems = getPagedTableItems(
+                    resultTableItems,
+                    pagination,
+                    innerPage,
+                    innerItemsPerPage,
+                    totalLength,
+                );
+                ctx.emit('update:totalItemsLength', resultTableItems.length);
+                const resultItems = resultTableItems.map((i) => i.data);
+                const pagedItems = pagination.value ? pagedTableItems.map((i) => i.data) : resultItems;
+                ctx.emit('change:totalItems', resultItems);
+                ctx.emit('change:pagedItems', pagedItems);
+                return pagedTableItems;
+            },
+            set(itemArr: TableItem[]) {
+                innerItems.value = itemArr.map((i) => i.data);
+                ctx.emit('change:totalItems', innerItems.value);
+            },
+        });
+
+        watch(
+            items,
+            (newItems: any[]) => {
+                innerItems.value = newItems || [];
+            },
+            { immediate: true },
+        );
+
+        const { isSelected, toggleSelect } = useTableSelect(
+            selectable,
+            selectedItems,
+            isSelectedAll,
+            innerTableItems,
+            computedTableItems,
+            rows,
+            ctx,
+        );
+
+        const { isExpanded, toggleExpand } = useTableExpand(hasExpand);
+
+        function expand(index: number) {
+            const target = computedTableItems.value[index];
+            if (!target) {
+                return;
+            }
+            toggleExpand(target.id);
+        }
+
+        function emitRowClick(rowItem: any, rowIndex: number) {
+            ctx.emit('rowClick', rowItem, rowIndex);
+        }
+
+        // for initial skeleton loading
+        const dummyTableItems = new Array(4).fill({}).map((item) => {
+            return { id: utils.string.createID(), data: item };
+        });
+
+        return {
+            computedTableItems,
+            dummyTableItems,
+            utils,
+            isSelected,
+            toggleSelect,
+            isExpanded,
+            toggleExpand,
+            emitRowClick,
+            // expose
+            expand,
+        };
+    },
+});
+</script>
+<style lang="scss" scoped src="./VsTable.scss" />
diff --git a/packages/vlossom/src/components/vs-table/VsTableBodyRow.vue b/packages/vlossom/src/components/vs-table/VsTableBodyRow.vue
new file mode 100644
index 000000000..8e357758d
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/VsTableBodyRow.vue
@@ -0,0 +1,155 @@
+<template>
+    <tr :style="trStyle" :class="[{ skeleton: loading }, rowState]">
+        <td class="draggable-td handle" v-if="draggable">
+            <vs-icon v-if="!loading" icon="drag" size="1.8rem" />
+        </td>
+        <td class="selectable-td" v-if="selectable">
+            <div v-if="loading" class="skeleton"></div>
+            <div v-else-if="isSelectableRow">
+                <slot name="check" />
+            </div>
+        </td>
+        <td
+            class="table-td"
+            v-for="(cell, index) in getRowData(item.data)"
+            :key="`td-${index}`"
+            :data-label="getHeader(cell.key)?.label"
+        >
+            <div v-if="loading" class="skeleton"></div>
+            <div v-else class="table-data">
+                <slot
+                    :name="`item-${cell.key}`"
+                    :header="getHeader(cell.key)"
+                    :item="item.data"
+                    :value="cell.value"
+                    :itemIndex="rowIndex"
+                    :valueIndex="index"
+                >
+                    {{ getTableData(cell.key, cell.value, item.data) }}
+                </slot>
+            </div>
+        </td>
+
+        <td v-if="expandable" class="expandable-td">
+            <button
+                v-if="isExpandableRow"
+                type="button"
+                @click.stop="emitToggleExpand(item.id)"
+                :disabled="loading"
+                :class="{ expanded }"
+                :aria-label="`expand ${item.id}`"
+            >
+                <vs-icon size="1.2rem" icon="keyboardArrowUp" />
+            </button>
+        </td>
+
+        <td v-if="expandable && expanded" :class="['expanded-row-content', { 'scale-up-ver-top': expanded }]">
+            <div class="expand-contents fade-in">
+                <slot name="expand" :id="item.id" :item="item.data" :itemIndex="rowIndex" />
+            </div>
+        </td>
+    </tr>
+</template>
+
+<script lang="ts">
+import { computed, ComputedRef, defineComponent, PropType, toRefs } from 'vue';
+import { UIState } from '@/declaration';
+import { VsIcon } from '@/icons';
+
+import type { TableHeader, TableItem, TableRow } from './types';
+
+export default defineComponent({
+    name: 'vs-table-body-row',
+    components: { VsIcon },
+    props: {
+        loading: { type: Boolean, default: false },
+        draggable: { type: Boolean, default: false },
+        expanded: { type: Boolean, default: false },
+        expandable: { type: Boolean, default: false },
+        headers: { type: Array as PropType<TableHeader[]>, required: true },
+        item: { type: Object as PropType<TableItem>, required: true },
+        rowIndex: { type: Number, required: true },
+        rows: { type: Object as PropType<TableRow>, default: () => ({}) },
+        selectable: { type: Boolean, default: false },
+        selected: { type: Boolean, default: false },
+        trStyle: {
+            type: Object as PropType<{ [key: string]: any }>,
+            default: () => ({}),
+        },
+    },
+    emits: ['toggleExpand'],
+    setup(props, { emit }) {
+        const { headers, item, rowIndex, rows, selected } = toRefs(props);
+
+        function getRowData(row: { [key: string]: any }) {
+            if (!headers.value) {
+                return Object.entries(item.value.data).map(([key, value]) => ({ key, value }));
+            }
+
+            return headers.value.map((header) => {
+                const { key } = header;
+                return { key, value: row[key] };
+            });
+        }
+
+        function getHeader(key: string): TableHeader | undefined {
+            return headers.value.find((header) => header.key === key);
+        }
+
+        function getTableData(key: string, value: any, rowItem: any) {
+            const header = getHeader(key);
+            if (header && header.filter) {
+                return header.filter(value, rowItem);
+            }
+            return value;
+        }
+
+        const isDummyRow = computed(() => {
+            return !Object.keys(item.value.data).length;
+        });
+
+        const isSelectableRow = computed(() => {
+            const { data } = item.value;
+            const { selectable: rowSelectableFn } = rows.value || {};
+
+            return !rowSelectableFn || rowSelectableFn(data, rowIndex.value);
+        });
+
+        const isExpandableRow: ComputedRef<boolean> = computed(() => {
+            const { data } = item.value;
+            const { expandable: rowExpandableFn } = rows.value || {};
+
+            return !rowExpandableFn || rowExpandableFn(data, rowIndex.value);
+        });
+
+        const rowState = computed(() => {
+            if (selected.value) {
+                return UIState.Selected;
+            }
+
+            const { state: rowStateFn } = rows.value || {};
+            if (!rowStateFn) {
+                return;
+            }
+            const { data } = item.value;
+            return rowStateFn(data, rowIndex.value);
+        });
+
+        function emitToggleExpand(id: string) {
+            emit('toggleExpand', id);
+        }
+
+        return {
+            isDummyRow,
+            isSelectableRow,
+            isExpandableRow,
+            rowState,
+            getRowData,
+            getHeader,
+            getTableData,
+            emitToggleExpand,
+        };
+    },
+});
+</script>
+<style lang="scss" scoped src="./VsTable.scss" />
diff --git a/packages/vlossom/src/components/vs-table/VsTableHeader.vue b/packages/vlossom/src/components/vs-table/VsTableHeader.vue
new file mode 100644
index 000000000..ceccf7810
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/VsTableHeader.vue
@@ -0,0 +1,61 @@
+<template>
+    <thead>
+        <tr :style="trStyle">
+            <th class="draggable-th" v-if="draggable">drag</th>
+            <th class="selectable-th" v-if="selectable" aria-label="select">
+                <slot name="check" />
+                select
+            </th>
+            <th
+                v-for="(header, index) in headers"
+                :key="`th-${index}`"
+                :class="['table-th', { sortable: header.sortable }]"
+                :style="{ width: header.width }"
+                @click="updateSortTypes(header)"
+            >
+                <slot :name="`header-${header.key}`" :header="header">
+                    {{ header.label }}
+                </slot>
+                <span v-if="header.sortable" class="sort-icon">
+                    <vs-icon :icon="getSortIcon(sortTypes[header.key])" size="1.4rem" />
+                </span>
+            </th>
+            <th class="expandable-th" v-if="expandable">expand</th>
+        </tr>
+    </thead>
+</template>
+<script lang="ts">
+import { defineComponent, PropType, toRefs } from 'vue';
+import { VsIcon } from '@/icons';
+import { type TableHeader, SortType } from './types';
+import { useSortableHeader } from './composables/useSortableHeader';
+
+export default defineComponent({
+    name: 'vs-table-header',
+    components: { VsIcon },
+    props: {
+        draggable: { type: Boolean, default: false },
+        expandable: { type: Boolean, default: false },
+        headers: { type: Array as PropType<TableHeader[]>, required: true },
+        selectable: { type: Boolean, default: false },
+        trStyle: {
+            type: Object as PropType<{ [key: string]: any }>,
+            default: () => ({}),
+        },
+        // v-model
+        sortTypes: {
+            type: Object as PropType<{ [key: string]: SortType }>,
+            default: () => ({}),
+        },
+    },
+    emits: ['update:sortTypes'],
+    setup(props, context) {
+        const { headers } = toRefs(props);
+
+        const { updateSortTypes, getSortIcon } = useSortableHeader(headers, context);
+
+        return { updateSortTypes, getSortIcon };
+    },
+});
+</script>
+<style lang="scss" scoped src="./VsTable.scss" />
diff --git a/packages/vlossom/src/components/vs-table/__tests__/vs-table.test.ts b/packages/vlossom/src/components/vs-table/__tests__/vs-table.test.ts
new file mode 100644
index 000000000..239ca972f
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/__tests__/vs-table.test.ts
@@ -0,0 +1,368 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import VsTable from '../VsTable.vue';
+import { TableHeader } from '../types';
+import { nextTick } from 'vue';
+
+function mountComponent() {
+    return mount(VsTable);
+}
+
+const headers: TableHeader[] = [
+    { label: 'ID', key: 'id', width: '7rem' },
+    { label: 'Name', key: 'name', width: '10rem', sortable: true },
+    { label: 'Description', key: 'desc', searchable: false },
+];
+
+const items: { [key: string]: any }[] = [
+    {
+        id: 1,
+        name: 'Apple',
+        desc: 'apple',
+        additionalText: 'Additional Text for Apple',
+    },
+    {
+        id: 2,
+        name: 'Banana',
+        desc: 'banana',
+        additionalText: 'Additional Text for Banana',
+    },
+    {
+        id: 3,
+        name: 'Carrot',
+        desc: 'carrot',
+        additionalText: 'Additional Text for Carrot',
+    },
+    {
+        id: 4,
+        name: 'Durian',
+        desc: 'Apples tastes better than durians',
+        additionalText: 'Additional Text for Durian',
+    },
+];
+
+describe('VsTable', () => {
+    describe('items / headers', () => {
+        it('headers와 items 배열을 props로 할당하면 적절하게 table을 렌더할 수 있다', async () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: {
+                    headers,
+                    items,
+                },
+            });
+
+            // then
+            // Check if table headers are rendered properly
+            const thElements = wrapper.findAll('thead th');
+            expect(thElements.length).toBe(headers.length);
+            thElements.forEach((th, index) => {
+                const headerLabel = headers[index].label;
+                expect(th.text()).toBe(headerLabel);
+            });
+
+            // Check if table rows are rendered properly
+            const tdElements = wrapper.findAll('tbody td');
+            expect(tdElements.length).toBe(headers.length * items.length);
+            tdElements.forEach((td, index) => {
+                const itemData: string =
+                    items[Math.floor(index / headers.length)][headers[index % headers.length].key].toString();
+                expect(td.text()).toBe(itemData);
+            });
+        });
+    });
+
+    describe('caption', () => {
+        it('table의 caption 영역을 설정할 수 있다', async () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: {
+                    headers,
+                    items,
+                    caption: 'CAPTION',
+                },
+            });
+
+            // then
+            const caption = wrapper.find('table caption');
+            expect(caption.text()).toBe('CAPTION');
+        });
+    });
+
+    describe('selectable', () => {
+        let wrapper: ReturnType<typeof mountComponent>;
+        it('select-all checkbox의 값이 true가 되면, 모든 item들이 선택된다', async () => {
+            // given
+            wrapper = mount(VsTable, {
+                props: {
+                    headers,
+                    items,
+                    selectable: true,
+                    selectedItems: [],
+                    'onUpdate:selectedItems': (e) => {
+                        wrapper?.setProps({ selectedItems: e });
+                    },
+                },
+            });
+
+            // when
+            const selectAllCheckBox = wrapper.find('.select-all').find('input');
+            await selectAllCheckBox.setValue(true);
+            await nextTick();
+
+            // then
+            const updateModelValueEvent = wrapper.emitted('update:selectedItems');
+            expect(updateModelValueEvent?.[2][0]).toEqual(items);
+        });
+
+        it('selectedItems가 items와 같을 때, select-all checkbox의 값이 true가 된다', async () => {
+            // given
+            wrapper = mount(VsTable, {
+                props: {
+                    headers,
+                    items,
+                    selectable: true,
+                    selectedItems: [],
+                },
+            });
+
+            // when
+            await wrapper.setProps({ selectedItems: [...items] });
+            await nextTick();
+
+            // then
+            const selectAllCheckBox = wrapper.find('.select-all').find('input');
+            expect(selectAllCheckBox.element.checked).toBe(true);
+        });
+
+        it('특정 item의 checkbox 값을 업데이트하면 selectedItems에 해당 item이 추가된다', async () => {
+            // given
+            wrapper = mount(VsTable, {
+                props: {
+                    headers,
+                    items,
+                    selectable: true,
+                    selectedItems: [],
+                    'onUpdate:selectedItems': (e) => {
+                        wrapper?.setProps({ selectedItems: e });
+                    },
+                },
+            });
+
+            // when
+            const firstItemCheckbox = wrapper.findComponent({ name: 'VsTableBodyRow' }).find('input[type="checkbox"]');
+            await firstItemCheckbox.setValue(true);
+            await nextTick();
+
+            // then
+            const updateModelValueEvent = wrapper.emitted('update:selectedItems');
+            expect(updateModelValueEvent?.[2][0]).toEqual([items[0]]);
+        });
+    });
+
+    describe('search', () => {
+        it('search props를 통해 입력된 키워드로 table item들을 검색할 수 있다 (단, searchable:false인 key는 검색 대상에서 제외된다)', async () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: {
+                    headers,
+                    items,
+                    search: '',
+                },
+            });
+
+            // when
+            await wrapper.setProps({ search: 'apple' });
+            await nextTick();
+
+            // then
+            const visibleRows = wrapper.findAll('tbody tr').filter((node) => node.isVisible());
+            const containsApple = visibleRows.some((row) => row.text().includes('Apple'));
+            const containsDurian = visibleRows.some((row) => row.text().includes('Durian'));
+            expect(containsApple).toBe(true);
+            expect(containsDurian).toBe(false);
+        });
+    });
+
+    describe('filter', () => {
+        it('filter props를 통해서 filter를 통과한 table item들만 렌더시킬 수 있다', async () => {
+            // given
+            const filter = {
+                id: (rowData: { [key: string]: any }): boolean => {
+                    return rowData.id < 2;
+                },
+            };
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: {
+                    headers,
+                    items,
+                    filter,
+                },
+            });
+
+            // then
+            const visibleRows = wrapper.findAll('tbody tr').filter((node) => node.isVisible());
+            const expectedVisible = ['Apple'];
+            const expectedNotVisible = ['Banana', 'Carrot', 'Durian'];
+
+            expectedVisible.forEach((item) => {
+                const isVisible = visibleRows.some((row) => row.text().includes(item));
+                expect(isVisible).toBe(true);
+            });
+            expectedNotVisible.forEach((item) => {
+                const isVisible = visibleRows.some((row) => row.text().includes(item));
+                expect(isVisible).toBe(false);
+            });
+        });
+    });
+
+    describe('sortable', () => {
+        it('sortable:true인 header를 한 번 클릭하면 ascending order로 item들을 정렬할 수 있다', async () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: { headers, items },
+            });
+
+            // when
+            const nameHeader = wrapper
+                .findAll('th')
+                .filter((th) => th.text().includes('Name'))
+                .at(0);
+            await nameHeader?.trigger('click');
+            await nextTick();
+
+            // then
+            const rows = wrapper.findAll('tbody tr');
+            const sortedItems = ['Apple', 'Banana', 'Carrot', 'Durian'];
+            rows.forEach((row, index) => {
+                expect(row.find('td:nth-child(2)').text()).toBe(sortedItems[index]);
+            });
+        });
+
+        it('sortable:true인 header를 두 번 클릭하면 descending order로 item들을 정렬할 수 있다', async () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: { headers, items },
+            });
+
+            // when
+            const nameHeader = wrapper
+                .findAll('th')
+                .filter((th) => th.text().includes('Name'))
+                .at(0);
+            await nameHeader?.trigger('click');
+            await nextTick();
+            await nameHeader?.trigger('click');
+            await nextTick();
+
+            // then
+            const rows = wrapper.findAll('tbody tr');
+            const sortedItems = ['Durian', 'Carrot', 'Banana', 'Apple'];
+            rows.forEach((row, index) => {
+                expect(row.find('td:nth-child(2)').text()).toBe(sortedItems[index]);
+            });
+        });
+    });
+
+    describe('pagination', () => {
+        it('pagination:true 일 때, pagination과 pagination-options select가 렌더된다', () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: {
+                    headers,
+                    items,
+                    pagination: true,
+                },
+            });
+
+            // then
+            const paginationWrapper = wrapper.find('.table-pagination .vs-pagination');
+            const selectWrapper = wrapper.find('.pagination-options .vs-select');
+            expect(paginationWrapper.exists()).toBe(true);
+            expect(selectWrapper.exists()).toBe(true);
+        });
+
+        it('pagination options을 이용해서 page size를 변경할 수 있다', async () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: {
+                    headers,
+                    items,
+                    pagination: true,
+                    paginationOptions: [
+                        { label: '2', value: 2 },
+                        { label: '3', value: 3 },
+                        { label: '4', value: 4 },
+                        { label: 'All', value: -1 },
+                    ],
+                },
+            });
+
+            // when
+            const pageSizeSelect = wrapper.findComponent({ name: 'VsSelect' });
+            await pageSizeSelect.vm.$emit('update:modelValue', 3);
+            await nextTick();
+
+            // then
+            const displayedItems = wrapper.findAll('.table-td[data-label="Name"]');
+            expect(displayedItems).toHaveLength(3);
+        });
+    });
+
+    describe('header slot', () => {
+        it('header slot을 통해 table header를 커스터마이징 할 수 있다', () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: { headers, items },
+                slots: {
+                    'header-id': '<template #header-id="{ header }">Custom ID Header</template>',
+                },
+            });
+
+            // then
+            const customIdHeader = wrapper
+                .findAll('.table-th')
+                .filter((th) => th.text().includes('Custom ID Header'))[0];
+            expect(customIdHeader.exists()).toBe(true);
+        });
+    });
+
+    describe('item slot', () => {
+        it('item slot을 통해 table body의 각 row를 커스터마이징 할 수 있다', () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: { headers, items },
+                slots: {
+                    'item-name': '<template #item-name="{ value }">{{ value.toUpperCase() }}</template>',
+                },
+            });
+
+            // then
+            const nameCells = wrapper.findAll('.table-td').filter((td) => td.attributes()['data-label'] === 'Name');
+            nameCells.forEach((cell, index) => {
+                expect(cell.text()).toBe(items[index].name.toUpperCase());
+            });
+        });
+    });
+
+    describe('expandable', () => {
+        it('table expand slot 안에 데이터를 넣을 수 있으며, expand 버튼을 클릭 시 해당 데이터가 화면에 렌더된다', async () => {
+            // given
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsTable, {
+                props: { headers, items },
+                slots: {
+                    expand: '<template #expand="{ item }">{{ item.additionalText }}</template>',
+                },
+            });
+
+            // when
+            const expandButton = wrapper.findAll('tr .expandable-td button').at(0);
+            await expandButton?.trigger('click');
+
+            // then
+            const expandedContent = wrapper.findAll('tr .expanded-row-content').at(0);
+            expect(expandedContent?.isVisible()).toBe(true);
+            expect(expandedContent?.text()).toContain('Additional Text for Apple');
+        });
+    });
+});
diff --git a/packages/vlossom/src/components/vs-table/composables/useSortableHeader.ts b/packages/vlossom/src/components/vs-table/composables/useSortableHeader.ts
new file mode 100644
index 000000000..b38eb0f04
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/composables/useSortableHeader.ts
@@ -0,0 +1,48 @@
+import { Ref, ref, watch } from 'vue';
+import { SortType, TableHeader } from '../types';
+
+export function useSortableHeader(headers: Ref<TableHeader[]>, ctx: any) {
+    const sortTypes: Ref<{ [key: string]: SortType }> = ref({});
+
+    const initSortTypes = () => {
+        sortTypes.value = headers.value.reduce((acc, { key, sortable = false }) => {
+            if (sortable) {
+                acc[key] = SortType.NONE;
+            }
+            return acc;
+        }, {} as { [key: string]: SortType });
+    };
+
+    watch(headers, initSortTypes, { immediate: true });
+
+    function updateSortTypes({ key, sortable }: TableHeader) {
+        if (!sortable) {
+            return;
+        }
+        Object.keys(sortTypes.value).forEach((sortKey: string) => {
+            if (key === sortKey) {
+                const type = sortTypes.value[sortKey];
+                sortTypes.value[sortKey] = (type + 1) % 3;
+            } else {
+                sortTypes.value[sortKey] = SortType.NONE;
+            }
+        });
+        ctx.emit('update:sortTypes', sortTypes.value);
+    }
+
+    function getSortIcon(type: SortType) {
+        switch (type) {
+            case SortType.ASCEND:
+                return 'expandMore';
+            case SortType.DESCEND:
+                return 'expandLess';
+            case SortType.NONE:
+            default:
+                return 'unfoldMore';
+        }
+    }
+    return {
+        updateSortTypes,
+        getSortIcon,
+    };
+}
diff --git a/packages/vlossom/src/components/vs-table/composables/useTableExpand.ts b/packages/vlossom/src/components/vs-table/composables/useTableExpand.ts
new file mode 100644
index 000000000..4ee885366
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/composables/useTableExpand.ts
@@ -0,0 +1,28 @@
+import { Ref, ref } from 'vue';
+
+export function useTableExpand(expandable: Ref<boolean>) {
+    const expandedIds: Ref<string[]> = ref([]);
+
+    function isExpanded(id: string): boolean {
+        return expandedIds.value.includes(id);
+    }
+
+    function toggleExpand(id: string) {
+        if (!expandable.value) {
+            return;
+        }
+
+        const expandedIndex = expandedIds.value.findIndex((expandedId) => expandedId === id);
+
+        if (expandedIndex > -1) {
+            expandedIds.value.splice(expandedIndex, 1);
+        } else {
+            expandedIds.value.push(id);
+        }
+    }
+
+    return {
+        isExpanded,
+        toggleExpand,
+    };
+}
diff --git a/packages/vlossom/src/components/vs-table/composables/useTableFilter.ts b/packages/vlossom/src/components/vs-table/composables/useTableFilter.ts
new file mode 100644
index 000000000..34d6096b5
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/composables/useTableFilter.ts
@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+import { TableItem, TableFilter } from '../types';
+
+export function useTableFilter() {
+    function getFilteredTableItems(tableItems: TableItem[], filter: Ref<TableFilter>): TableItem[] {
+        if (!filter.value) {
+            return tableItems;
+        }
+
+        const filtered = tableItems.filter(({ data }) => {
+            return Object.keys(filter.value).every((propertyName: string) => {
+                const filterFn = filter.value[propertyName];
+                if (!filterFn) {
+                    return true;
+                }
+                return filterFn(data);
+            });
+        });
+        return filtered;
+    }
+
+    return {
+        getFilteredTableItems,
+    };
+}
diff --git a/packages/vlossom/src/components/vs-table/composables/useTablePagination.ts b/packages/vlossom/src/components/vs-table/composables/useTablePagination.ts
new file mode 100644
index 000000000..d0897cfcd
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/composables/useTablePagination.ts
@@ -0,0 +1,22 @@
+import { Ref } from 'vue';
+import { TableItem } from '../types';
+
+export function useTablePagination() {
+    function getPagedTableItems(
+        tableItems: TableItem[],
+        pagination: Ref<boolean>,
+        page: Ref<number>,
+        itemsPerPage: Ref<number>,
+        totalLength: Ref<number>,
+    ): TableItem[] {
+        if (!pagination.value || totalLength.value > 0 || itemsPerPage.value === -1) {
+            return tableItems;
+        }
+
+        return tableItems.slice((page.value - 1) * itemsPerPage.value, page.value * itemsPerPage.value);
+    }
+
+    return {
+        getPagedTableItems,
+    };
+}
diff --git a/packages/vlossom/src/components/vs-table/composables/useTableSearch.ts b/packages/vlossom/src/components/vs-table/composables/useTableSearch.ts
new file mode 100644
index 000000000..17c23d18e
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/composables/useTableSearch.ts
@@ -0,0 +1,28 @@
+import { computed, Ref } from 'vue';
+import type { TableHeader, TableItem } from '../types';
+import { utils } from '@/utils';
+
+export function useTableSearch(headers: Ref<TableHeader[]>, searchableKeys: Ref<string[]>) {
+    const searchTargetKeys = computed(() => {
+        return headers.value
+            .filter((header: TableHeader) => header.searchable !== false)
+            .map((header: TableHeader) => header.key)
+            .concat(searchableKeys.value);
+    });
+
+    function getSearchedTableItems(tableItems: TableItem[], keyword: Ref<string>): TableItem[] {
+        if (keyword.value.trim() === '') {
+            return tableItems;
+        }
+        const lowercaseKeyword = keyword.value.trim().toLowerCase();
+        return tableItems.filter(({ data }) => {
+            const searchableData = utils.object.pick(data, searchTargetKeys.value);
+            const target = Object.values(searchableData).join(' ').toLowerCase();
+            return target.includes(lowercaseKeyword);
+        });
+    }
+
+    return {
+        getSearchedTableItems,
+    };
+}
diff --git a/packages/vlossom/src/components/vs-table/composables/useTableSelect.ts b/packages/vlossom/src/components/vs-table/composables/useTableSelect.ts
new file mode 100644
index 000000000..3e925c5f7
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/composables/useTableSelect.ts
@@ -0,0 +1,92 @@
+import { Ref, WritableComputedRef, computed, ComputedRef, ref, watch } from 'vue';
+import type { TableItem, TableRow } from '../types';
+import { utils } from '@/utils';
+
+export function useTableSelect(
+    selectable: Ref<boolean>,
+    selectedItems: Ref<any[]>,
+    isSelectedAll: Ref<boolean>,
+    innerTableItems: ComputedRef<TableItem[]>,
+    computedTableItems: WritableComputedRef<TableItem[]>,
+    rows: Ref<TableRow>,
+    ctx: any,
+) {
+    const selectedIds: Ref<string[]> = ref([]);
+
+    const selectableItems = computed(() => {
+        const { selectable: selectableFn } = rows.value || {};
+
+        if (!selectableFn) {
+            return selectable.value ? computedTableItems.value : [];
+        }
+        return computedTableItems.value.filter((item, index) => {
+            return selectableFn(item.data, index);
+        });
+    });
+
+    const computedSelectedAll: WritableComputedRef<boolean> = computed({
+        get(): boolean {
+            return selectableItems.value.length > 0 && selectedIds.value.length === selectableItems.value.length;
+        },
+        set(selectAll: boolean) {
+            if (selectAll) {
+                selectedIds.value = selectableItems.value.map((item) => item.id);
+            } else {
+                selectedIds.value = [];
+            }
+        },
+    });
+
+    watch(selectedIds, (newVal, oldVal) => {
+        if (utils.object.isEqual(newVal, oldVal)) {
+            return;
+        }
+        const newSelectedItems = computedTableItems.value
+            .filter((item) => {
+                return selectedIds.value.includes(item.id);
+            })
+            .map((item) => item.data);
+        ctx.emit('change:selectedItems', newSelectedItems);
+    });
+
+    watch(
+        selectedItems,
+        (newItems: any[]) => {
+            const newSelectedIds = innerTableItems.value
+                .filter((tableItem) => {
+                    return newItems.some((item) => utils.object.isEqual(tableItem.data, item));
+                })
+                .map((tableItem) => tableItem.id);
+            selectedIds.value = newSelectedIds;
+        },
+        { immediate: true },
+    );
+
+    watch(computedSelectedAll, (v: boolean) => {
+        ctx.emit('update:isSelectedAll', v);
+    });
+
+    watch(isSelectedAll, (v: boolean) => {
+        if (computedSelectedAll.value === v) {
+            return;
+        }
+        computedSelectedAll.value = v;
+    });
+
+    function isSelected(id: string): boolean {
+        return selectedIds.value.includes(id);
+    }
+
+    function toggleSelect(check: boolean, id: string) {
+        if (check) {
+            selectedIds.value = [...selectedIds.value, id];
+        } else {
+            selectedIds.value = selectedIds.value.filter((selectedId) => selectedId !== id);
+        }
+    }
+
+    return {
+        isSelected,
+        toggleSelect,
+    };
+}
diff --git a/packages/vlossom/src/components/vs-table/composables/useTableSort.ts b/packages/vlossom/src/components/vs-table/composables/useTableSort.ts
new file mode 100644
index 000000000..946e307a3
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/composables/useTableSort.ts
@@ -0,0 +1,26 @@
+import { Ref } from 'vue';
+import { TableItem, SortType } from '../types';
+
+export function useTableSort() {
+    function getSortedTableItems(items: TableItem[], sortTypes: Ref<{ [key: string]: SortType }>) {
+        const sortKey = Object.keys(sortTypes.value).find((key) => {
+            return sortTypes.value[key] !== SortType.NONE;
+        });
+        if (!sortKey) {
+            return items;
+        }
+
+        const sortType = sortTypes.value[sortKey];
+        const sorted = [...items].sort((itemA: TableItem, itemB: TableItem) => {
+            const a = itemA.data[sortKey];
+            const b = itemB.data[sortKey];
+            const comparison = +(a > b) || +(a === b) - 1;
+            return sortType === SortType.ASCEND ? comparison : -comparison;
+        });
+        return sorted;
+    }
+
+    return {
+        getSortedTableItems,
+    };
+}
diff --git a/packages/vlossom/src/components/vs-table/constant.ts b/packages/vlossom/src/components/vs-table/constant.ts
new file mode 100644
index 000000000..0b93ebe5c
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/constant.ts
@@ -0,0 +1,9 @@
+import { LabelValue } from '@/declaration';
+
+export const DEFAULT_TABLE_ITEMS_PER_PAGE = 50;
+
+export const DEFAULT_TABLE_PAGE_COUNT: LabelValue<number>[] = [
+    { label: '50 items', value: 50 },
+    { label: '100 items', value: 100 },
+    { label: 'all items', value: -1 },
+];
diff --git a/packages/vlossom/src/components/vs-table/stories/VsTable.stories.ts b/packages/vlossom/src/components/vs-table/stories/VsTable.stories.ts
new file mode 100644
index 000000000..6df372750
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/stories/VsTable.stories.ts
@@ -0,0 +1,333 @@
+import { chromaticParameters, colorScheme, getColorSchemeTemplate } from '@/storybook';
+import { Ref, ref } from 'vue';
+import VsTable from './../VsTable.vue';
+import { VsIcon } from '@/icons';
+
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+const items = [
+    {
+        id: 1,
+        name: 'Apple',
+        order: 4,
+        checked: true,
+        created: '2022-10-02',
+        desc: 'Lorem Ipsum has been the industry ',
+        additionalText: 'Additional Text for Apple: This content only shows when expanded',
+    },
+    {
+        id: 2,
+        name: 'Banana',
+        order: 1,
+        checked: true,
+        created: '2024-01-01',
+        desc: 'has been the tscrambled it tscrambled it the industrys standard dummy text',
+        additionalText: 'Additional Text for Banana: This content only shows when expanded',
+    },
+    {
+        id: 3,
+        name: 'Carrot',
+        order: 3,
+        checked: false,
+        created: '2023-07-15',
+        desc: 'scrambled it to make a type specimen book',
+        additionalText: 'Additional Text for Carrot: This content only shows when expanded',
+    },
+    {
+        id: 4,
+        name: 'Durian',
+        order: 2,
+        checked: false,
+        created: '2023-10-11',
+        desc: 'pecimen book. It has survived not only five centuries, but also the leap into electronic',
+        additionalText: 'Additional Text for Durian: This content only shows when expanded',
+    },
+];
+
+const meta: Meta<typeof VsTable> = {
+    title: 'Components/Base Components/VsTable',
+    component: VsTable,
+    render: (args: any) => ({
+        components: { VsTable },
+        setup() {
+            return { args };
+        },
+        template: `
+            <vs-table v-bind="args"/>
+        `,
+    }),
+    tags: ['autodocs'],
+    argTypes: {
+        colorScheme,
+    },
+    args: {
+        headers: [
+            { label: 'ID', key: 'id', width: '7rem' },
+            { label: 'Name', key: 'name', width: '10rem' },
+            { label: 'Description', key: 'desc' },
+            { label: 'Check', key: 'checked', width: '7rem' },
+        ],
+        items,
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof VsTable>;
+
+export const Default: Story = {};
+
+export const ColorScheme: Story = {
+    render: (args: any) => ({
+        components: { VsTable },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div>
+                ${getColorSchemeTemplate(`
+                    <vs-table v-bind="args" color-scheme="{{ color }}" />
+                `)}
+            </div>
+        `,
+    }),
+    parameters: {
+        chromatic: chromaticParameters.theme,
+    },
+};
+
+export const Caption: Story = {
+    args: {
+        caption: 'Fruit Shopping List',
+    },
+};
+
+export const Dense: Story = {
+    args: {
+        dense: true,
+    },
+};
+
+export const Selectable: Story = {
+    render: (args: any) => ({
+        components: { VsTable },
+        setup() {
+            const selected = ref([
+                {
+                    id: 1,
+                    name: 'Apple',
+                    order: 4,
+                    checked: true,
+                    created: '2022-10-02',
+                    desc: 'Lorem Ipsum has been the industry ',
+                    additionalText: 'Additial Text for Apple: This content only shows when expanded',
+                },
+                {
+                    id: 2,
+                    name: 'Banana',
+                    order: 1,
+                    checked: true,
+                    created: '2024-01-01',
+                    desc: 'has been the tscrambled it tscrambled it the industrys standard dummy text',
+                    additionalText: 'Additial Text for Banana: This content only shows when expanded',
+                },
+            ]);
+            return { args, selected };
+        },
+        template: `
+            <vs-table v-bind="args" v-model:selected-items="selected" />
+            <div style="height: 200px; margin-top: 1rem;">
+                <h4>selected items :</h4>
+                {{selected}}
+            </div>
+        `,
+    }),
+    args: {
+        selectable: true,
+    },
+};
+
+export const Search: Story = {
+    render: (args: any) => ({
+        components: { VsTable, VsIcon },
+        setup() {
+            const search = ref('');
+            return { args, search };
+        },
+        template: `
+            <div>
+                <vs-input v-model="search" placeholder="Search" style="padding: 0.5rem">
+                    <template #prepend-content>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" style="margin-left: 0.5rem">
+                            <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
+                        </svg>
+                    </template>
+                </vs-input>
+                <vs-table v-bind="args" :search="search">
+                    <template #item-checked="{ value }">
+                        <vs-switch v-model="value"></vs-switch>
+                    </template>
+                </vs-table>
+            </div>
+        `,
+    }),
+    args: {
+        headers: [
+            { label: 'ID', key: 'id', width: '7rem' },
+            { label: 'Name', key: 'name', width: '10rem' },
+            { label: 'Description', key: 'desc', width: '26rem' },
+            { label: 'Check', key: 'checked', width: '7rem', searchable: false },
+        ],
+        items,
+    },
+};
+
+export const Filter: Story = {
+    render: (args: any) => ({
+        components: { VsTable, VsIcon },
+        setup() {
+            const id: Ref<string | number> = ref('all');
+            const checked = ref('false');
+            const options = ['all', 1, 2, 3, 4];
+            const filter = {
+                id: (rowData: { [key: string]: any }): boolean => {
+                    if (id.value === 'all') {
+                        return true;
+                    }
+                    return id.value === rowData.id;
+                },
+                checked: (rowData: { [key: string]: any }): boolean => {
+                    return checked.value === rowData.checked;
+                },
+            };
+            return { args, id, checked, options, filter };
+        },
+        template: `
+            <div>
+                <vs-block style="margin-bottom: 0.8rem">
+                    <h3 style="margin-bottom: 0.5rem">Filter</h3>
+                    <vs-select v-model="id" :options="options" label="id" no-clear style="margin-bottom: 0.5rem"/>
+                    <vs-switch v-model="checked" label="checked" true-label="true" false-label="false"/>
+                </vs-block>
+                <vs-table v-bind="args" :filter="filter"/>
+            </div>
+        `,
+    }),
+};
+
+export const SortableHeader: Story = {
+    args: {
+        headers: [
+            { label: 'ID', key: 'id', width: '5rem' },
+            { label: 'Name', key: 'name', width: '8rem', sortable: true },
+            { label: 'Order', key: 'order', width: '8rem', sortable: true },
+            { label: 'Description', key: 'desc', width: '20rem' },
+            { label: 'Created', key: 'created', width: '12rem', sortable: true },
+        ],
+    },
+};
+
+export const Draggable: Story = {
+    args: {
+        draggable: true,
+    },
+};
+
+export const Pagination: Story = {
+    args: {
+        pagination: true,
+        paginationOptions: [
+            { label: '2', value: 2 },
+            { label: '3', value: 3 },
+            { label: '4', value: 4 },
+            { label: 'All', value: -1 },
+        ],
+        pageEdgeButtons: true,
+    },
+};
+
+export const Loading: Story = {
+    args: {
+        loading: true,
+    },
+    parameters: {
+        chromatic: chromaticParameters.theme,
+    },
+};
+
+export const NoData: Story = {
+    args: {
+        items: [],
+    },
+    parameters: {
+        chromatic: chromaticParameters.theme,
+    },
+};
+
+export const HeaderSlot: Story = {
+    render: (args: any) => ({
+        components: { VsTable, VsIcon },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div>
+                <vs-table v-bind="args">
+                    <template #header-desc="{ header }">
+                        {{ header.label }}
+                        <vs-tooltip style="margin-left: 0.5rem">
+                            <vs-icon icon="info" size="25px"/>
+                            <template #tooltip>this is {{ header.label.toLowerCase() }}</template>
+                        </vs-tooltip>
+                    </template>
+                    <template #header-checked="{ header }">
+                        Liked
+                    </template> 
+                </vs-table>
+            </div>
+        `,
+    }),
+};
+
+export const ItemSlot: Story = {
+    render: (args: any) => ({
+        components: { VsTable },
+        setup() {
+            return { args };
+        },
+        template: `
+            <div>
+                <vs-table v-bind="args">
+                    <template #item-desc="{ value }">
+                        <vs-text-wrap copy noTooltip width="18rem">{{ value }}</vs-text-wrap>
+                    </template>
+                    <template #item-checked="{ value }">
+                        <vs-switch v-model="value"></vs-switch>
+                    </template>
+                </vs-table>
+            </div>
+        `,
+    }),
+};
+
+export const Expandable: Story = {
+    render: (args: any) => ({
+        components: { VsTable },
+        setup() {
+            return { args };
+        },
+        template: `
+			<div>
+				<vs-table v-bind="args">
+					<template #expand="{ item }">
+						<div style="padding: 1rem">
+							{{ item.additionalText }}
+						</div>
+					</template>
+				</vs-table>
+			</div>
+		`,
+    }),
+    parameters: {
+        chromatic: chromaticParameters.theme,
+    },
+};
diff --git a/packages/vlossom/src/components/vs-table/types.ts b/packages/vlossom/src/components/vs-table/types.ts
new file mode 100644
index 000000000..35f1116ea
--- /dev/null
+++ b/packages/vlossom/src/components/vs-table/types.ts
@@ -0,0 +1,33 @@
+import { UIState } from '@/declaration';
+
+export interface TableHeader {
+    label: string;
+    key: string;
+    searchable?: boolean;
+    sortable?: boolean;
+    width?: string;
+    filter?: (value: any, item?: any) => any;
+}
+
+export interface TableRow<T = any> {
+    state?: (row: any, rowIndex?: number) => UIState;
+    selectable?: (row: T, rowIndex?: number) => boolean;
+    expandable?: (row: T, rowIndex?: number) => boolean;
+}
+
+export interface TableItem {
+    id: string;
+    data: { [key: string]: any };
+}
+
+export type TableFilter = { [key: string]: (rowData: { [key: string]: any }) => boolean };
+
+export enum SortType {
+    NONE,
+    ASCEND,
+    DESCEND,
+}
+
+export interface VsTableStyleSet {
+    //[TODO] add style set
+}
diff --git a/packages/vlossom/src/declaration/enums.ts b/packages/vlossom/src/declaration/enums.ts
index 14649ac50..0c5a0a6c3 100644
--- a/packages/vlossom/src/declaration/enums.ts
+++ b/packages/vlossom/src/declaration/enums.ts
@@ -35,6 +35,7 @@ export enum VsComponent {
     VsSelect = 'VsSelect',
     VsStepper = 'VsStepper',
     VsSwitch = 'VsSwitch',
+    VsTable = 'VsTable',
     VsTabs = 'VsTabs',
     VsTextarea = 'VsTextarea',
     VsTextWrap = 'VsTextWrap',
diff --git a/packages/vlossom/src/declaration/types.ts b/packages/vlossom/src/declaration/types.ts
index 49e22e95b..8b4bc39f6 100644
--- a/packages/vlossom/src/declaration/types.ts
+++ b/packages/vlossom/src/declaration/types.ts
@@ -25,6 +25,7 @@ import type {
     VsSelectStyleSet,
     VsStepperStyleSet,
     VsSwitchStyleSet,
+    VsTableStyleSet,
     VsTabsStyleSet,
     VsTextareaStyleSet,
     VsTextWrapStyleSet,
@@ -68,6 +69,7 @@ export interface StyleSet {
     VsSelect?: { [key: string]: VsSelectStyleSet };
     VsStepper?: { [key: string]: VsStepperStyleSet };
     VsSwitch?: { [key: string]: VsSwitchStyleSet };
+    VsTable?: { [key: string]: VsTableStyleSet };
     VsTabs?: { [key: string]: VsTabsStyleSet };
     VsTextarea?: { [key: string]: VsTextareaStyleSet };
     VsTextWrap?: { [key: string]: VsTextWrapStyleSet };
@@ -153,3 +155,8 @@ export type CssPosition = (typeof CSS_POSITION)[number];
 export type Placement = (typeof PLACEMENTS)[number];
 
 export type Size = (typeof SIZES)[number];
+
+export interface LabelValue<T = any> {
+    label: string;
+    value: T;
+}
diff --git a/packages/vlossom/src/icons/icons.ts b/packages/vlossom/src/icons/icons.ts
index b4a975108..30e217f27 100644
--- a/packages/vlossom/src/icons/icons.ts
+++ b/packages/vlossom/src/icons/icons.ts
@@ -34,10 +34,23 @@ export const iconSvgs = {
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
             <path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Z"/>
         </svg>`,
+    // drag_indicator
+    drag: `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+            <path d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z"/>
+        </svg>`,
     error: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
             <path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
         </svg>`,
+    expandLess: `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+            <path d="m296-345-56-56 240-240 240 240-56 56-184-184-184 184Z"/>
+        </svg>`,
+    expandMore: `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+            <path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/>
+        </svg>`,
     // first_page
     goFirst: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
@@ -67,15 +80,35 @@ export const iconSvgs = {
             <path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/>
         </svg>
     `,
+    keyboardArrowUp: `
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+			<path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/>
+		</svg>`,
+    keyboardArrowDown: `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+            <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/>
+        </svg>`,
     // chat_bubble
     message: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
             <path d="M80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/>
         </svg>
     `,
-    keyboardArrowDown: `
+    // block
+    noData: `
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/>
+        </svg>
+    `,
+    // radio_button_checked
+    radioChecked: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-            <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/>
+            <path d="M480-280q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Zm0 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+        </svg>`,
+    // radio_button_unchecked
+    radioUnchecked: `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+            <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
         </svg>`,
     rotateRight: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
@@ -104,6 +137,10 @@ export const iconSvgs = {
                 d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Z"
             />
         </svg>`,
+    unfoldMore: `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" >
+            <path d="M480-120 300-300l58-58 122 122 122-122 58 58-180 180ZM358-598l-58-58 180-180 180 180-58 58-122-122-122 122Z"/>
+        </svg>`,
     warning: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
             <path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/>
diff --git a/packages/vlossom/src/styles/theme.scss b/packages/vlossom/src/styles/theme.scss
index 177e1a37e..a8b98b53d 100644
--- a/packages/vlossom/src/styles/theme.scss
+++ b/packages/vlossom/src/styles/theme.scss
@@ -5,6 +5,8 @@ $theme-light: (
     area-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.16),
     area-backgroundColor: #ffffff,
     area-hover-backgroundColor: var(--vs-grey-100),
+    table-expand-box-shadow-up: inset 0 3px 8px rgba(100, 100, 100, 0.3),
+    table-expand-box-shadow-down: inset 0 -2px 4px rgba(50, 50, 50, 0.15),
 );
 
 $theme-dark: (
@@ -14,6 +16,8 @@ $theme-dark: (
     area-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.16),
     area-backgroundColor: #14151f,
     area-hover-backgroundColor: var(--vs-grey-700),
+    table-expand-box-shadow-up: inset 0 3px 6px rgba(255, 255, 255, 0.2),
+    table-expand-box-shadow-down: inset 0 -2px 4px rgba(255, 255, 255, 0.15),
 );
 
 :root {
diff --git a/packages/vlossom/src/utils/object.ts b/packages/vlossom/src/utils/object.ts
index b145d211c..3570095b3 100644
--- a/packages/vlossom/src/utils/object.ts
+++ b/packages/vlossom/src/utils/object.ts
@@ -14,4 +14,6 @@ export const objectUtil = {
     },
 
     omit: _.omit,
+
+    pick: _.pick,
 };