docs: move slots sections as h2

docs/content/4.data/1.table.md

@@ -365,11 +365,45 @@ const filteredRows = computed(() => {
 ```
 ::
 
-### Slots
+### Empty
+
+Use the `empty-state` prop to display a message when there are no results.
+
+You can pass an `object` through the `empty-state` prop or globally through `ui.table.default.emptyState`.
+
+You can also set it to `null` to hide the empty state.
+
+::component-card
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+    - key: 'title'
+      label: 'Title'
+    - key: 'email'
+      label: 'Email'
+    - key: 'role'
+      label: 'Role'
+props:
+  emptyState:
+    icon: 'i-heroicons-circle-stack-20-solid'
+    label: "No items."
+excludedProps:
+  - emptyState
+---
+::
+
+## Slots
 
 You can use slots to customize the header and data cells of the table.
 
-#### Header
+### `#<column>-header`
 
 Use the `#<column>-header` slot to customize the header cell of a column. You will have access to the `column`, `sort` and `on-sort` properties in the slot scope.
 
@@ -384,12 +418,10 @@ The `on-sort` property is a function that you can call to sort the table and acc
 Even though you can customize the sort button as mentioned in the [Sortable](#sortable) section, you can use this slot to completely override its behavior, with a custom dropdown for example.
 ::
 
-#### Data
+### `#<column>-data`
 
 Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row` and `column` properties in the slot scope.
 
-#### Example
-
 You can for example create an extra column for actions with a [Dropdown](/elements/dropdown) component inside or change the color of the rows based on a selection.
 
 ::component-example{class="grid"}
@@ -449,40 +481,6 @@ const selected = ref([people[1]])
 ```
 ::
 
-### Empty
-
-Use the `empty-state` prop to display a message when there are no results.
-
-You can pass an `object` through the `empty-state` prop or globally through `ui.table.default.emptyState`.
-
-You can also set it to `null` to hide the empty state.
-
-::component-card
----
-padding: false
-overflowClass: 'overflow-x-auto'
-baseProps:
-  class: 'w-full'
-  columns:
-    - key: 'id'
-      label: 'ID'
-    - key: 'name'
-      label: 'Name'
-    - key: 'title'
-      label: 'Title'
-    - key: 'email'
-      label: 'Email'
-    - key: 'role'
-      label: 'Role'
-props:
-  emptyState:
-    icon: 'i-heroicons-circle-stack-20-solid'
-    label: "No items."
-excludedProps:
-  - emptyState
----
-::
-
 ## Props
 
 :component-props