blog: more fixes to the react table blog (#333)

* blog: update to react table post

* update

Author: ymc9

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'
@@ -191,13 +191,12 @@ const columns = [
 ];
 
 export const OrderDetails = () => {
+  // fetch data with query hooks
   const { data } = useFindManyOrderDetail({
     ...queryInclude,
-    orderBy: computeOrderBy(),
-    skip: pagination.pageIndex * pagination.pageSize,
-    take: pagination.pageSize,
   });
 
+  // create a table instance
   const table = useReactTable({
     data: orders ?? [],
     columns,
@@ -206,10 +205,12 @@ 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 = () => {
+  ...
+
   return (
     <table>
       <thead>
@@ -291,7 +292,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,
@@ -324,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