From 548aa7ed4d3ecf115a2362930e63e9eb16746e53 Mon Sep 17 00:00:00 2001
From: Shl <kitkitcot@yandex.ru>
Date: Fri, 5 Jul 2024 20:55:14 +0700
Subject: [PATCH] docs: fix `show selected rows` step

---
 .../src/content/docs/components/data-table.md | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md
index d36f2104..7d5330f7 100644
--- a/apps/www/src/content/docs/components/data-table.md
+++ b/apps/www/src/content/docs/components/data-table.md
@@ -866,11 +866,25 @@ This adds a checkbox to each row and a checkbox in the header to select all rows
 
 You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
 
-```vue
-<div class="flex-1 text-sm text-muted-foreground">
-    {{ table.getFilteredSelectedRowModel().rows.length }} of
-    {{ table.getFilteredRowModel().rows.length }} row(s) selected.
-</div>
+```vue:line-numbers {8-11}
+<template>
+  <div>
+    <div class="border rounded-md">
+        <Table />
+    </div>
+
+    <div class="flex items-center justify-end space-x-2 py-4">
+      <div class="flex-1 text-sm text-muted-foreground">
+        {{ table.getFilteredSelectedRowModel().rows.length }} of
+        {{ table.getFilteredRowModel().rows.length }} row(s) selected.
+      </div>
+      <div class="space-x-2">
+        <PaginationButtons />
+      </div>
+    </div>
+  </div>
+</template>
+
 ```
 
 </Steps>