fix(VDataTable): add ability to hide default body (#19844)

resolves #18854
vuetifyjs · May 21, 2024 · 2f8ee0f · 2f8ee0f
1 parent f016954
commit 2f8ee0f
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 62 deletions.
diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json
@@ -18,6 +18,7 @@
  "headers": "An array of objects that each describe a header column. See the example below for a definition of all properties.",
  "headersLength": "Can be used in combination with `hide-default-header` to specify the number of columns in the table to allow expansion rows and loading bar to function properly.",
  "height": "Set an explicit height of table.",
+ "hideDefaultBody": "Hides the default body.",
  "hideDefaultHeader": "Hides the default header.",
  "hideDefaultFooter": "Hides the default footer. This has no effect on `v-data-table-virtual`.",
  "hover": "Adds a hover effects to a table rows.",

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -73,6 +73,7 @@ export type VDataTableSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots
 export const makeDataTableProps = propsFactory({
  ...makeVDataTableRowsProps(),
 
+ hideDefaultBody: Boolean,
  hideDefaultFooter: Boolean,
  hideDefaultHeader: Boolean,
  width: [String, Number],
@@ -251,18 +252,20 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
  </thead>
  )}
  { slots.thead?.(slotProps.value) }
- <tbody>
- { slots['body.prepend']?.(slotProps.value) }
- { slots.body ? slots.body(slotProps.value) : (
- <VDataTableRows
- { ...attrs }
- { ...dataTableRowsProps }
- items={ paginatedItems.value }
- v-slots={ slots }
- />
- )}
- { slots['body.append']?.(slotProps.value) }
- </tbody>
+ { !props.hideDefaultBody && (
+ <tbody>
+ { slots['body.prepend']?.(slotProps.value) }
+ { slots.body ? slots.body(slotProps.value) : (
+ <VDataTableRows
+ { ...attrs }
+ { ...dataTableRowsProps }
+ items={ paginatedItems.value }
+ v-slots={ slots }
+ />
+ )}
+ { slots['body.append']?.(slotProps.value) }
+ </tbody>
+ )}
  { slots.tbody?.(slotProps.value) }
  { slots.tfoot?.(slotProps.value) }
  </>

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -175,18 +175,20 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
  </thead>
  )}
  { slots.thead?.(slotProps.value) }
- <tbody class="v-data-table__tbody" role="rowgroup">
- { slots['body.prepend']?.(slotProps.value) }
- { slots.body ? slots.body(slotProps.value) : (
- <VDataTableRows
- { ...attrs }
- { ...dataTableRowsProps }
- items={ flatItems.value }
- v-slots={ slots }
- />
- )}
- { slots['body.append']?.(slotProps.value) }
- </tbody>
+ { !props.hideDefaultBody && (
+ <tbody class="v-data-table__tbody" role="rowgroup">
+ { slots['body.prepend']?.(slotProps.value) }
+ { slots.body ? slots.body(slotProps.value) : (
+ <VDataTableRows
+ { ...attrs }
+ { ...dataTableRowsProps }
+ items={ flatItems.value }
+ v-slots={ slots }
+ />
+ )}
+ { slots['body.append']?.(slotProps.value) }
+ </tbody>
+ )}
  { slots.tbody?.(slotProps.value) }
  { slots.tfoot?.(slotProps.value) }
  </>

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -212,48 +212,50 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
  />
  </thead>
  )}
- <tbody>
- <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
- <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
- </tr>
+ { !props.hideDefaultBody && (
+ <tbody>
+ <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
+ <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
+ </tr>
 
- { slots['body.prepend']?.(slotProps.value) }
+  { slots['body.prepend']?.(slotProps.value) }
 
- <VDataTableRows
- { ...attrs }
- { ...dataTableRowsProps }
- items={ displayItems.value }
- >
- {{
- ...slots,
- item: itemSlotProps => (
- <VVirtualScrollItem
- key={ itemSlotProps.internalItem.index }
- renderless
- onUpdate:height={ height => handleItemResize(itemSlotProps.internalItem.index, height) }
- >
- { ({ itemRef }) => (
- slots.item?.({ ...itemSlotProps, itemRef }) ?? (
- <VDataTableRow
- { ...itemSlotProps.props }
- ref={ itemRef }
- key={ itemSlotProps.internalItem.index }
- index={ itemSlotProps.internalItem.index }
- v-slots={ slots }
- />
- )
- )}
- </VVirtualScrollItem>
- ),
- }}
- </VDataTableRows>
+  <VDataTableRows
+  { ...attrs }
+  { ...dataTableRowsProps }
+  items={ displayItems.value }
+  >
+  {{
+  ...slots,
+  item: itemSlotProps => (
+  <VVirtualScrollItem
+  key={ itemSlotProps.internalItem.index }
+  renderless
+  onUpdate:height={ height => handleItemResize(itemSlotProps.internalItem.index, height) }
+  >
+  { ({ itemRef }) => (
+  slots.item?.({ ...itemSlotProps, itemRef }) ?? (
+  <VDataTableRow
+  { ...itemSlotProps.props }
+  ref={ itemRef }
+  key={ itemSlotProps.internalItem.index }
+  index={ itemSlotProps.internalItem.index }
+  v-slots={ slots }
+  />
+  )
+  )}
+  </VVirtualScrollItem>
+  ),
+  }}
+  </VDataTableRows>
 
- { slots['body.append']?.(slotProps.value) }
+  { slots['body.append']?.(slotProps.value) }
 
- <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>
- <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
- </tr>
- </tbody>
+ <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>
+ <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>
+ </tr>
+ </tbody>
+ )}
  </table>
  </div>
  ),