From 923236fa950942f9bf45579645cb45317ed4002f Mon Sep 17 00:00:00 2001
From: ymc9 <104139426+ymc9@users.noreply.github.com>
Date: Sun, 21 Jul 2024 11:55:07 -0700
Subject: [PATCH 1/2] blog: update to react table post

---
 blog/react-table/index.md | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/blog/react-table/index.md b/blog/react-table/index.md
index a54b0380..868101fb 100644
--- a/blog/react-table/index.md
+++ b/blog/react-table/index.md
@@ -92,7 +92,7 @@ A [Prisma schema file](https://github.com/ymc9/react-query-table-zenstack/blob/m
 
 SQL databases are not meant to be consumed from the frontend. You need an API to mediate. You can build such an API in many ways, but here we'll use [ZenStack](https://zenstack.dev) to "unbuild" it. ZenStack is a full-stack toolkit built above Prisma, and one of the cool things it does is to automagically derive a backend API from the schema.
 
-Setting ZenStack up is very easy:
+Setting ZenStack up is straightforward:
 
 1. Run `npx zenstack init` to prep the project. It copies the `schema.prisma` file into `schema.zmodel` - which is the schema file used by ZenStack. ZModel is a superset of Prisma schema.
   
@@ -133,7 +133,7 @@ I know a big **🚨 NO THIS IS NOT SECURE 🚨** is flashing in your mind. Hold
 
 Having a free API is cool, but writing `fetch` to call it is cumbersome. How about some free query hooks? Yes, add the `@zenstackhq/tanstack-query` plugin to the ZModel schema, and you'll have a set of fully typed React Query hooks generated for each model:
 
-```ts title="schema.zmodel"
+```zmodel title="schema.zmodel"
 plugin hooks {
   provider = '@zenstackhq/tanstack-query'
   target = 'react'
@@ -193,9 +193,6 @@ const columns = [
 export const OrderDetails = () => {
   const { data } = useFindManyOrderDetail({
     ...queryInclude,
-    orderBy: computeOrderBy(),
-    skip: pagination.pageIndex * pagination.pageSize,
-    take: pagination.pageSize,
   });
   
   const table = useReactTable({
@@ -206,7 +203,7 @@ export const OrderDetails = () => {
 }
 ```
 
-We can then render the table with some basic TSX:
+We can then render the table with some basic tsx:
 
 ```tsx
 export const OrderDetails = () => {
@@ -291,7 +288,6 @@ Also, update the hooks call to respect the pagination state:
 ```tsx
 const { data } = useFindManyOrderDetail({
   ...queryInclude,
-  orderBy: computeOrderBy(),
   // highlight-start
   skip: pagination.pageIndex * pagination.pageSize,
   take: pagination.pageSize,

From 025c76bc211e47a98ae11901ffea90928379beb8 Mon Sep 17 00:00:00 2001
From: ymc9 <104139426+ymc9@users.noreply.github.com>
Date: Sun, 21 Jul 2024 12:00:30 -0700
Subject: [PATCH 2/2] update

---
 blog/react-table/index.md | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/blog/react-table/index.md b/blog/react-table/index.md
index 868101fb..a28868fb 100644
--- a/blog/react-table/index.md
+++ b/blog/react-table/index.md
@@ -191,10 +191,12 @@ const columns = [
 ];
 
 export const OrderDetails = () => {
+  // fetch data with query hooks
   const { data } = useFindManyOrderDetail({
     ...queryInclude,
   });
   
+  // create a table instance
   const table = useReactTable({
     data: orders ?? [],
     columns,
@@ -207,6 +209,8 @@ We can then render the table with some basic tsx:
 
 ```tsx
 export const OrderDetails = () => {
+  ...
+
   return (
     <table>
       <thead>
@@ -320,21 +324,21 @@ This part well demonstrates the value of "headless" UI. You don't need to manage
 
 We've got a pretty cool table end-to-end working now, with roughly 200 lines of code. Less code is only one of the benefits of this combination. It also provides excellent flexibility in every layer of the stack:
 
-- Prisma's query
+- **Prisma's query**
 
     Prisma is known for its concise yet powerful query API. It allows you to do complex joins and aggregations without writing SQL. In our example, our table shows data from five tables, and we barely noticed the complexity.
 
-- ZenStack's access control
+- **ZenStack's access control**
 
     Remember I said we'll get back to the security issue? A real-world API must have an authorization mechanism with it. ZenStack's real power lies in its ability to define access control rules in the data schema. You can define rules like rejecting anonymous users or showing only the orders of the current login employee, etc. Read more details [here](/docs/the-complete-guide/part1/access-policy/).
 
-- React Query's fetching
+- **React Query's fetching**
 
-  React Query provides great flexibility around how data is fetched, cached, and invalidated. Leverage its power to build a highly responsive UI and reduce the load on the database at same time.
+    React Query provides great flexibility around how data is fetched, cached, and invalidated. Leverage its power to build a highly responsive UI and reduce the load on the database at same time.
 
-- React Table's state management
+- **React Table's state management**
   
-  React Table has every aspect of a table's state organized for you. It provides a solid pattern to follow without limiting how you render the table UI.
+    React Table has every aspect of a table's state organized for you. It provides a solid pattern to follow without limiting how you render the table UI.
 
 ## Conclusion