Skip to content

Commit

Permalink
fix: hide default body
Browse files Browse the repository at this point in the history
  • Loading branch information
@MajesticPotatoe
MajesticPotatoe committed May 20, 2024
1 parent 88badc6 commit 78a832e
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 62 deletions.
1 change: 1 addition & 0 deletions packages/api-generator/src/locale/en/VDataTable.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
27 changes: 15 additions & 12 deletions packages/vuetify/src/components/VDataTable/VDataTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down Expand Up @@ -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) }
</>
Expand Down
26 changes: 14 additions & 12 deletions packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) }
</>
Expand Down
78 changes: 40 additions & 38 deletions packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
),
Expand Down

0 comments on commit 78a832e

Please sign in to comment.