fix(VDataTable): add missing footer divider and update padding

vuetifyjs · Nov 20, 2023 · 48c6573 · 48c6573
1 parent d84591e
commit 48c6573
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -5,6 +5,7 @@ import './VDataTable.sass'
 import { makeVDataTableFooterProps, VDataTableFooter } from './VDataTableFooter'
 import { makeVDataTableHeadersProps, VDataTableHeaders } from './VDataTableHeaders'
 import { makeVDataTableRowsProps, VDataTableRows } from './VDataTableRows'
+import { VDivider } from '@/components/VDivider'
 import { makeVTableProps, VTable } from '@/components/VTable/VTable'
 
 // Composables
@@ -252,6 +253,8 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
             ),
             bottom: () => slots.bottom ? slots.bottom(slotProps.value) : (
               <>
+                <VDivider />
+
                 <VDataTableFooter
                   { ...dataTableFooterProps }
                   v-slots={{

diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss
@@ -1,6 +1,6 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
-$data-table-footer-padding: 0 8px !default;
+$data-table-footer-padding: 4px !default;
 $data-table-header-sort-badge-size: 20px !default;
 $data-table-header-sort-badge-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;