change responsive]

src/core/components/BaseTable/src/BaseTable.vue

@@ -1,20 +1,17 @@
 <template>
-  <div :class="[prefixCls]">
+  <div :class="[prefixCls, 'min-w-0 max-w-full']">
     <ASpin tip="در حال دریافت اطلاعات..." :indicator="indicator" :spinning="loading">
-      <!--    <div ref="skeletonWidth" class="w-full"></div>-->
-      <!--    <transition>-->
-      <!-- TODO Check -->
-      <!--   relative h-full-->
       <div class="scrollable-container" id="components-affix-demo-target" ref="containerRef">
-        <!--- TODO remove AFFix -->
-        <AAffix :target="() => containerRef">
-          <div class="flex items-center justify-between mb-2">
-            <div class="flex items-center gap-1" v-if="showOptionHeader">
-              <!--          <AInputSearch placeholder="جستجو" enter-button />-->
+        <div class="table-toolbar sticky top-0 z-10 mb-2 shrink-0 bg-white">
+          <div class="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between">
+            <div
+              v-if="showOptionHeader"
+              class="flex min-w-0 flex-1 flex-wrap items-center gap-2"
+            >
               <AInput
                 @keyup.enter="handleSearchText"
                 placeholder="جستجو"
-                class="pl-1"
+                class="table-toolbar-search min-w-[11rem] flex-1 basis-52 sm:max-w-md"
                 v-model:value="searchText"
               >
                 <template #suffix>
@@ -26,7 +23,7 @@
                   />
                 </template>
               </AInput>
-              <div class="flex flex-wrap md:flex-nowrap gap-1 items-center">
+              <div class="flex shrink-0 flex-wrap items-center gap-1">
                 <BaseButton
                   type="text"
                   class="text-gray-500"
@@ -79,11 +76,12 @@
                 </BaseButton>
               </div>
             </div>
-            <div>
+            <div v-if="$slots.extraHeader" class="w-full min-w-0 shrink-0 xl:w-auto xl:max-w-[55%]">
               <slot name="extraHeader" />
             </div>
           </div>
-        </AAffix>
+        </div>
+        <div class="table-body min-h-0 min-w-0 flex-1 overflow-auto">
         <ATable
           :columns="_columns"
           :data-source="data"
@@ -100,9 +98,8 @@
           </template>
           <!--      <template #loading> sdfsdfsdfsd </template>-->
         </ATable>
-        <!--        absolute bottom-0 w-full-->
-        <!--        absolute bottom-0-->
-        <div class="flex items-center justify-between mt-5 w-full" v-if="showPaginate">
+        </div>
+        <div class="table-footer mt-5 flex w-full shrink-0 items-center justify-between" v-if="showPaginate">
           <span> {{ totalRecord }} مورد یافت شد </span>
           <div class="flex items-center gap-2 justify-between">
             <APagination
@@ -683,13 +680,47 @@ defineExpose({
 @prefix:~ '@{prefixCls}-base-table';
 
 .@{prefix} {
-  @apply h-full;
+  @apply h-full max-w-full flex flex-col min-h-0 min-w-0;
+
+  .scrollable-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    max-width: 100%;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .table-body {
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    overflow: auto;
+  }
+
+  .table-footer {
+    flex-shrink: 0;
+  }
+
+  .table-toolbar-search {
+    width: 100%;
+  }
+
+  .table-toolbar-extra:empty {
+    display: none;
+  }
+
   .ant-table-wrapper {
     border: 1px solid #eee;
     border-radius: var(--border-radius-base);
   }
   .ant-spin-container,
   .ant-spin-nested-loading {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
     height: 100%;
     @apply relative;
   }

src/core/components/BaseTableOld/src/BaseTable.vue

@@ -663,13 +663,24 @@ defineExpose({
 @prefix:~ '@{prefixCls}-base-table';
 
 .@{prefix} {
-  @apply h-full;
+  @apply h-full max-w-full flex flex-col min-h-0;
+  .scrollable-container {
+    max-width: 100%;
+    flex: 1;
+    min-height: 0;
+    overflow-x: auto;
+    overflow-y: auto;
+  }
   .ant-table-wrapper {
     border: 1px solid #eee;
     border-radius: var(--border-radius-base);
   }
   .ant-spin-container,
   .ant-spin-nested-loading {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
     height: 100%;
     @apply relative;
   }