diff --git a/example/package-lock.json b/example/package-lock.json
index 04d93a6449ba..bd8cb4dbfa25 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -12187,7 +12187,8 @@
         "react-markdown": "^5.0.3",
         "react-query": "^3.8.2",
         "react-router-dom": "^5.2.0",
-        "remark-gfm": "^1.0.0"
+        "remark-gfm": "^1.0.0",
+        "sunflower-antd": "^1.0.0-beta.3"
       },
       "dependencies": {
         "@ant-design/colors": {
@@ -30993,6 +30994,11 @@
         }
       }
     },
+    "sunflower-antd": {
+      "version": "1.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/sunflower-antd/-/sunflower-antd-1.0.0-beta.3.tgz",
+      "integrity": "sha512-SAdjHgNemTFNxUF/QJ2KdC0x6wWpY1EsMJMo+F5KIHCDRsUUahjAIldoK+ejH00rPgUoCOhAHQ/ob/J7eyZ5qg=="
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/example/src/components/pages/category.tsx b/example/src/components/pages/category.tsx
index 4c78722b6d89..cf6e3be670a5 100644
--- a/example/src/components/pages/category.tsx
+++ b/example/src/components/pages/category.tsx
@@ -8,16 +8,23 @@ import {
     Column,
     Input,
     useTranslate,
+    useTable,
+    DeleteButton,
+    Space,
 } from "readmin";
 
 export const CategoryList = (props: { resourceName: string }) => {
     const translate = useTranslate();
+    const { tableProps } = useTable({
+        initialPageSize: 10,
+    });
     return (
         <List {...props}>
             <Table
+                {...tableProps}
                 rowKey="id"
                 pagination={{
-                    pageSize: 20,
+                    ...tableProps.pagination,
                     position: ["bottomCenter"],
                     size: "small",
                 }}
@@ -34,6 +41,24 @@ export const CategoryList = (props: { resourceName: string }) => {
                         "common:resources.categories.fields.title",
                     )}
                 />
+                <Column
+                    title={translate("common:table.actions", "Actions")}
+                    dataIndex="actions"
+                    key="actions"
+                    render={(
+                        _text: string | number,
+                        record: {
+                            id: string | number;
+                        },
+                    ): React.ReactNode => (
+                        <Space>
+                            <DeleteButton
+                                size="small"
+                                recordItemId={record.id}
+                            />
+                        </Space>
+                    )}
+                />
             </Table>
         </List>
     );
diff --git a/example/src/components/pages/files.tsx b/example/src/components/pages/files.tsx
index caba4b332524..b540529fde18 100644
--- a/example/src/components/pages/files.tsx
+++ b/example/src/components/pages/files.tsx
@@ -6,15 +6,20 @@ import {
     FileField,
     UrlField,
     useTranslate,
+    useTable,
 } from "readmin";
 
 export const FilesList = (props: any) => {
     const translate = useTranslate();
+    const { tableProps } = useTable({
+        initialPageSize: 20,
+    });
     return (
         <List {...props}>
             <Table
+                {...tableProps}
                 pagination={{
-                    pageSize: 20,
+                    ...tableProps.pagination,
                     position: ["bottomCenter"],
                     size: "small",
                 }}
diff --git a/example/src/components/pages/images.tsx b/example/src/components/pages/images.tsx
index 116403d932e6..3ad774464d92 100644
--- a/example/src/components/pages/images.tsx
+++ b/example/src/components/pages/images.tsx
@@ -6,16 +6,21 @@ import {
     ImageField,
     NumberField,
     useTranslate,
+    useTable,
 } from "readmin";
 
 export const ImagesList = (props: any) => {
     const translate = useTranslate();
+    const { tableProps } = useTable({
+        initialPageSize: 20,
+    });
     return (
         <List {...props}>
             <Table
+                {...tableProps}
                 rowKey="id"
                 pagination={{
-                    pageSize: 20,
+                    ...tableProps.pagination,
                     position: ["bottomCenter"],
                     size: "small",
                 }}
diff --git a/example/src/components/pages/landing.tsx b/example/src/components/pages/landing.tsx
index 748728324a17..46b5e092062a 100644
--- a/example/src/components/pages/landing.tsx
+++ b/example/src/components/pages/landing.tsx
@@ -15,16 +15,25 @@ import {
     useFileUploadState,
     useTranslate,
     RichtextField,
+    useTable,
+    EditButton,
+    ShowButton,
+    Space,
 } from "readmin";
 
 export const LandingList = (props: any) => {
     const translate = useTranslate();
+    const { tableProps } = useTable({
+        initialPageSize: 20,
+    });
+
     return (
         <List {...props}>
             <Table
+                {...tableProps}
                 rowKey="id"
                 pagination={{
-                    pageSize: 20,
+                    ...tableProps.pagination,
                     position: ["bottomCenter"],
                     size: "small",
                 }}
@@ -47,6 +56,22 @@ export const LandingList = (props: any) => {
                         multiple: 1,
                     }}
                 />
+                <Column
+                    title={translate("common:table.actions", "Actions")}
+                    dataIndex="actions"
+                    key="actions"
+                    render={(
+                        _text: string | number,
+                        record: {
+                            id: string | number;
+                        },
+                    ): React.ReactNode => (
+                        <Space>
+                            <EditButton size="small" recordItemId={record.id} />
+                            <ShowButton size="small" recordItemId={record.id} />
+                        </Space>
+                    )}
+                />
             </Table>
         </List>
     );
diff --git a/example/src/components/pages/post-light.tsx b/example/src/components/pages/post-light.tsx
index 7d45990dc7bf..27d0dfcf1b7d 100644
--- a/example/src/components/pages/post-light.tsx
+++ b/example/src/components/pages/post-light.tsx
@@ -11,16 +11,25 @@ import {
     Edit,
     Show,
     ShowSimple,
+    useTable,
+    EditButton,
+    DeleteButton,
+    ShowButton,
+    Space,
 } from "readmin";
 
 export const PostLightList = (props: any) => {
     const translate = useTranslate();
+    const { tableProps } = useTable({
+        initialPageSize: 20,
+    });
     return (
         <List {...props}>
             <Table
+                {...tableProps}
                 rowKey="id"
                 pagination={{
-                    pageSize: 20,
+                    ...tableProps.pagination,
                     position: ["bottomCenter"],
                     size: "small",
                 }}
@@ -52,6 +61,26 @@ export const PostLightList = (props: any) => {
                         multiple: 2,
                     }}
                 />
+                <Column
+                    title={translate("common:table.actions", "Actions")}
+                    dataIndex="actions"
+                    key="actions"
+                    render={(
+                        _text: string | number,
+                        record: {
+                            id: string | number;
+                        },
+                    ): React.ReactNode => (
+                        <Space>
+                            <EditButton size="small" recordItemId={record.id} />
+                            <DeleteButton
+                                size="small"
+                                recordItemId={record.id}
+                            />
+                            <ShowButton size="small" recordItemId={record.id} />
+                        </Space>
+                    )}
+                />
             </Table>
         </List>
     );
diff --git a/example/src/components/pages/post.tsx b/example/src/components/pages/post.tsx
index 667264f7edf5..fade6fc58b9a 100644
--- a/example/src/components/pages/post.tsx
+++ b/example/src/components/pages/post.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import {
     List,
-    Table,
     Column,
     Create,
     Edit,
@@ -22,6 +21,12 @@ import {
     useApiUrl,
     useFileUploadState,
     useTranslate,
+    Table,
+    useTable,
+    Space,
+    EditButton,
+    DeleteButton,
+    ShowButton,
 } from "readmin";
 
 import ReactMarkdown from "react-markdown";
@@ -33,18 +38,33 @@ import { ShowAside } from "../show";
 
 export const PostList = (props: any) => {
     const translate = useTranslate();
+    const { tableProps } = useTable({
+        // permanentFilter: {
+        //     categoryId: [37, 20]
+        // },
+        initialSorter: [
+            {
+                field: "id",
+                order: "descend",
+            },
+        ],
+        initialFilter: {
+            status: ["active"],
+        },
+    });
+
+    console.log("Postlist datasource: ", tableProps);
+
     return (
         <List {...props}>
             <Table
+                {...tableProps}
                 rowKey="id"
                 pagination={{
-                    pageSize: 20,
+                    ...tableProps.pagination,
                     position: ["bottomCenter"],
                     size: "small",
                 }}
-                filter={{
-                    categoryId: [37, 20],
-                }}
             >
                 <Column
                     dataIndex="id"
@@ -117,6 +137,26 @@ export const PostList = (props: any) => {
                     )}
                     defaultFilteredValue={["active"]}
                 />
+                <Column
+                    title={translate("common:table.actions", "Actions")}
+                    dataIndex="actions"
+                    key="actions"
+                    render={(
+                        _text: string | number,
+                        record: {
+                            id: string | number;
+                        },
+                    ): React.ReactNode => (
+                        <Space>
+                            <EditButton size="small" recordItemId={record.id} />
+                            <DeleteButton
+                                size="small"
+                                recordItemId={record.id}
+                            />
+                            <ShowButton size="small" recordItemId={record.id} />
+                        </Space>
+                    )}
+                />
             </Table>
         </List>
     );
diff --git a/example/src/components/pages/tag.tsx b/example/src/components/pages/tag.tsx
index cce3e3a0d1af..e8ce504823f7 100644
--- a/example/src/components/pages/tag.tsx
+++ b/example/src/components/pages/tag.tsx
@@ -11,14 +11,20 @@ import {
     Input,
     Button,
     Collapse,
-    AntdTable,
     useTranslate,
+    useTable,
+    EditButton,
+    DeleteButton,
+    Space,
 } from "readmin";
 
 export const TagList = (props: any) => {
     const translate = useTranslate();
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [loading, setLoading] = useState(false);
+    const { tableProps } = useTable({
+        initialPageSize: 20,
+    });
 
     const start = () => {
         setLoading(true);
@@ -37,9 +43,9 @@ export const TagList = (props: any) => {
         selectedRowKeys,
         onChange: onSelectChange,
         selections: [
-            AntdTable.SELECTION_ALL,
-            AntdTable.SELECTION_INVERT,
-            AntdTable.SELECTION_NONE,
+            Table.SELECTION_ALL,
+            Table.SELECTION_INVERT,
+            Table.SELECTION_NONE,
         ],
     };
 
@@ -63,10 +69,11 @@ export const TagList = (props: any) => {
                 </span>
             </div>
             <Table
+                {...tableProps}
                 rowSelection={rowSelection}
                 rowKey="id"
                 pagination={{
-                    pageSize: 20,
+                    ...tableProps.pagination,
                     position: ["bottomCenter"],
                     size: "small",
                 }}
@@ -95,6 +102,25 @@ export const TagList = (props: any) => {
                         </ReferenceField>
                     )}
                 />
+                <Column
+                    title={translate("common:table.actions", "Actions")}
+                    dataIndex="actions"
+                    key="actions"
+                    render={(
+                        _text: string | number,
+                        record: {
+                            id: string | number;
+                        },
+                    ): React.ReactNode => (
+                        <Space>
+                            <EditButton size="small" recordItemId={record.id} />
+                            <DeleteButton
+                                size="small"
+                                recordItemId={record.id}
+                            />
+                        </Space>
+                    )}
+                />
             </Table>
         </List>
     );
diff --git a/example/src/components/pages/user.tsx b/example/src/components/pages/user.tsx
index f4f8807f82c3..45e5bf5bbf58 100644
--- a/example/src/components/pages/user.tsx
+++ b/example/src/components/pages/user.tsx
@@ -19,18 +19,27 @@ import {
     Tabs,
     DatePicker,
     useTranslate,
+    useTable,
+    EditButton,
+    DeleteButton,
+    ShowButton,
+    Space,
 } from "readmin";
 
 import { Aside } from "../aside";
 
 export const UserList = (props: any) => {
     const translate = useTranslate();
+    const { tableProps } = useTable({
+        initialPageSize: 20,
+    });
     return (
         <List {...props} aside={Aside}>
             <Table
+                {...tableProps}
                 rowKey="id"
                 pagination={{
-                    pageSize: 20,
+                    ...tableProps.pagination,
                     position: ["bottomCenter"],
                     size: "small",
                 }}
@@ -74,6 +83,26 @@ export const UserList = (props: any) => {
                     title={translate("common:resources.users.fields.birthday")}
                     render={(value) => <DateField value={value} />}
                 />
+                <Column
+                    title={translate("common:table.actions", "Actions")}
+                    dataIndex="actions"
+                    key="actions"
+                    render={(
+                        _text: string | number,
+                        record: {
+                            id: string | number;
+                        },
+                    ): React.ReactNode => (
+                        <Space>
+                            <EditButton size="small" recordItemId={record.id} />
+                            <DeleteButton
+                                size="small"
+                                recordItemId={record.id}
+                            />
+                            <ShowButton size="small" recordItemId={record.id} />
+                        </Space>
+                    )}
+                />
             </Table>
         </List>
     );
diff --git a/package-lock.json b/package-lock.json
index 40ea667499c0..d109ab2e239f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2684,14 +2684,6 @@
             "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
             "dev": true
         },
-        "@types/quill": {
-            "version": "1.3.10",
-            "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
-            "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
-            "requires": {
-                "parchment": "^1.1.2"
-            }
-        },
         "@types/react": {
             "version": "17.0.2",
             "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz",
@@ -4365,6 +4357,7 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
             "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+            "dev": true,
             "requires": {
                 "function-bind": "^1.1.1",
                 "get-intrinsic": "^1.0.2"
@@ -4959,15 +4952,6 @@
                 "sha.js": "^2.4.8"
             }
         },
-        "create-react-class": {
-            "version": "15.7.0",
-            "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
-            "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
-            "requires": {
-                "loose-envify": "^1.3.1",
-                "object-assign": "^4.1.1"
-            }
-        },
         "cross-spawn": {
             "version": "7.0.3",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -5475,19 +5459,6 @@
             "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
             "dev": true
         },
-        "deep-equal": {
-            "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-            "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-            "requires": {
-                "is-arguments": "^1.0.4",
-                "is-date-object": "^1.0.1",
-                "is-regex": "^1.0.4",
-                "object-is": "^1.0.1",
-                "object-keys": "^1.1.1",
-                "regexp.prototype.flags": "^1.2.0"
-            }
-        },
         "deep-is": {
             "version": "0.1.3",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -5513,6 +5484,7 @@
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
             "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+            "dev": true,
             "requires": {
                 "object-keys": "^1.0.12"
             }
@@ -6535,11 +6507,6 @@
             "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
             "dev": true
         },
-        "eventemitter3": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
-            "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
-        },
         "events": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -7238,7 +7205,8 @@
         "function-bind": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-            "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+            "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+            "dev": true
         },
         "functional-red-black-tree": {
             "version": "1.0.1",
@@ -7262,6 +7230,7 @@
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
             "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+            "dev": true,
             "requires": {
                 "function-bind": "^1.1.1",
                 "has": "^1.0.3",
@@ -7418,6 +7387,7 @@
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
             "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+            "dev": true,
             "requires": {
                 "function-bind": "^1.1.1"
             }
@@ -7437,7 +7407,8 @@
         "has-symbols": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-            "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+            "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+            "dev": true
         },
         "has-value": {
             "version": "1.0.0",
@@ -8128,14 +8099,6 @@
                 "is-decimal": "^1.0.0"
             }
         },
-        "is-arguments": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
-            "integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==",
-            "requires": {
-                "call-bind": "^1.0.0"
-            }
-        },
         "is-arrayish": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -8238,7 +8201,8 @@
         "is-date-object": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
-            "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
+            "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
+            "dev": true
         },
         "is-decimal": {
             "version": "1.0.4",
@@ -8398,6 +8362,7 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
             "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+            "dev": true,
             "requires": {
                 "call-bind": "^1.0.2",
                 "has-symbols": "^1.0.1"
@@ -12611,19 +12576,11 @@
             "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
             "dev": true
         },
-        "object-is": {
-            "version": "1.1.5",
-            "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-            "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-            "requires": {
-                "call-bind": "^1.0.2",
-                "define-properties": "^1.1.3"
-            }
-        },
         "object-keys": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-            "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+            "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+            "dev": true
         },
         "object-visit": {
             "version": "1.0.1",
@@ -12896,11 +12853,6 @@
                 "readable-stream": "^2.1.5"
             }
         },
-        "parchment": {
-            "version": "1.1.4",
-            "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
-            "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
-        },
         "parent-module": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -14674,43 +14626,6 @@
             "integrity": "sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg==",
             "dev": true
         },
-        "quill": {
-            "version": "1.3.7",
-            "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
-            "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
-            "requires": {
-                "clone": "^2.1.1",
-                "deep-equal": "^1.0.1",
-                "eventemitter3": "^2.0.3",
-                "extend": "^3.0.2",
-                "parchment": "^1.1.4",
-                "quill-delta": "^3.6.2"
-            },
-            "dependencies": {
-                "clone": {
-                    "version": "2.1.2",
-                    "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-                    "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
-                }
-            }
-        },
-        "quill-delta": {
-            "version": "3.6.3",
-            "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
-            "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
-            "requires": {
-                "deep-equal": "^1.0.1",
-                "extend": "^3.0.2",
-                "fast-diff": "1.1.2"
-            },
-            "dependencies": {
-                "fast-diff": {
-                    "version": "1.1.2",
-                    "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
-                    "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
-                }
-            }
-        },
         "ramda": {
             "version": "0.27.1",
             "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
@@ -15133,11 +15048,6 @@
                 "scheduler": "^0.20.1"
             }
         },
-        "react-dom-factories": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz",
-            "integrity": "sha1-63cFxNs2+1AbOqOP91lhaqD/luA="
-        },
         "react-error-boundary": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.0.tgz",
@@ -15188,19 +15098,6 @@
                 "match-sorter": "^6.0.2"
             }
         },
-        "react-quill": {
-            "version": "1.3.5",
-            "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-1.3.5.tgz",
-            "integrity": "sha512-/W/rNCW+6QpGz8yQ9tFK5Ka/h/No1RqrcOOvCIOR092OiKzRFlU2xbPEwiP3Wgy/Dx13pi1YhjReDMX/5uotJg==",
-            "requires": {
-                "@types/quill": "1.3.10",
-                "create-react-class": "^15.6.0",
-                "lodash": "^4.17.4",
-                "prop-types": "^15.5.10",
-                "quill": "^1.3.7",
-                "react-dom-factories": "^1.0.0"
-            }
-        },
         "react-router": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -15417,6 +15314,7 @@
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
             "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
+            "dev": true,
             "requires": {
                 "call-bind": "^1.0.2",
                 "define-properties": "^1.1.3"
@@ -16962,6 +16860,11 @@
                 }
             }
         },
+        "sunflower-antd": {
+            "version": "1.0.0-beta.3",
+            "resolved": "https://registry.npmjs.org/sunflower-antd/-/sunflower-antd-1.0.0-beta.3.tgz",
+            "integrity": "sha512-SAdjHgNemTFNxUF/QJ2KdC0x6wWpY1EsMJMo+F5KIHCDRsUUahjAIldoK+ejH00rPgUoCOhAHQ/ob/J7eyZ5qg=="
+        },
         "supports-color": {
             "version": "5.5.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 209c9824e0a5..23ae0a3cb40e 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
         "react-markdown": "^5.0.3",
         "react-query": "^3.8.2",
         "react-router-dom": "^5.2.0",
-        "remark-gfm": "^1.0.0"
+        "remark-gfm": "^1.0.0",
+        "sunflower-antd": "^1.0.0-beta.3"
     }
 }
diff --git a/src/components/antd/antd.ts b/src/components/antd/antd.ts
index 9f8f7a7ff31e..63e163bc5035 100644
--- a/src/components/antd/antd.ts
+++ b/src/components/antd/antd.ts
@@ -163,13 +163,13 @@ export type { SwitchProps } from "antd/lib/switch";
 export { default as Switch } from "antd/lib/switch";
 
 export type {
-    TableProps as AntdTableProps,
+    TableProps,
     TablePaginationConfig,
     ColumnGroupType as TableColumnGroupType,
     ColumnType as TableColumnType,
     ColumnProps as TableColumnProps,
 } from "antd/lib/table";
-export { default as AntdTable } from "antd/lib/table";
+export { default as Table } from "antd/lib/table";
 
 export type { TransferProps } from "antd/lib/transfer";
 export { default as Transfer } from "antd/lib/transfer";
diff --git a/src/components/containers/resource/index.spec.tsx b/src/components/containers/resource/index.spec.tsx
index 2c2091d5ac27..a5cc86b51421 100644
--- a/src/components/containers/resource/index.spec.tsx
+++ b/src/components/containers/resource/index.spec.tsx
@@ -4,7 +4,8 @@ import { render, TestWrapper, MockJSONServer } from "@test";
 
 import { Resource } from "./index";
 import { List } from "@components/crud";
-import { Table, Column } from "@components";
+import { Column } from "@components";
+import { Table } from "antd";
 
 describe("<Resource />", () => {
     const PostList = ({ resourceName }: { resourceName: string }) => {
@@ -16,7 +17,7 @@ describe("<Resource />", () => {
             </List>
         );
     };
-    it("renders with data", async () => {
+    it("renders with List", async () => {
         const { container } = render(
             <Resource name="posts" list={PostList} />,
             {
diff --git a/src/components/crud/list/__snapshots__/index.spec.tsx.snap b/src/components/crud/list/__snapshots__/index.spec.tsx.snap
index dd79f2f196d4..f0642aebd23a 100644
--- a/src/components/crud/list/__snapshots__/index.spec.tsx.snap
+++ b/src/components/crud/list/__snapshots__/index.spec.tsx.snap
@@ -32,39 +32,15 @@ exports[`<List/> JSON Rest Server renders given data 1`] = `
         >
           <div
             class="ant-table-wrapper"
-            style="width: 100%;"
           >
             <div
               class="ant-spin-nested-loading"
             >
-              <div>
-                <div
-                  class="ant-spin ant-spin-spinning"
-                >
-                  <span
-                    class="ant-spin-dot ant-spin-dot-spin"
-                  >
-                    <i
-                      class="ant-spin-dot-item"
-                    />
-                    <i
-                      class="ant-spin-dot-item"
-                    />
-                    <i
-                      class="ant-spin-dot-item"
-                    />
-                    <i
-                      class="ant-spin-dot-item"
-                    />
-                  </span>
-                </div>
-              </div>
               <div
-                class="ant-spin-container ant-spin-blur"
+                class="ant-spin-container"
               >
                 <div
-                  class="ant-table"
-                  data-testid="ant-tab"
+                  class="ant-table ant-table-empty"
                 >
                   <div
                     class="ant-table-container"
@@ -91,23 +67,57 @@ exports[`<List/> JSON Rest Server renders given data 1`] = `
                           class="ant-table-tbody"
                         >
                           <tr
-                            class="ant-table-row ant-table-row-level-0"
-                            data-row-key="1"
-                          >
-                            <td
-                              class="ant-table-cell"
-                            >
-                              Necessitatibus necessitatibus id et cupiditate provident est qui amet.
-                            </td>
-                          </tr>
-                          <tr
-                            class="ant-table-row ant-table-row-level-0"
-                            data-row-key="2"
+                            class="ant-table-placeholder"
                           >
                             <td
                               class="ant-table-cell"
                             >
-                              Recusandae consectetur aut atque est.
+                              <div
+                                class="ant-empty ant-empty-normal"
+                              >
+                                <div
+                                  class="ant-empty-image"
+                                >
+                                  <svg
+                                    class="ant-empty-img-simple"
+                                    height="41"
+                                    viewBox="0 0 64 41"
+                                    width="64"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <g
+                                      fill="none"
+                                      fill-rule="evenodd"
+                                      transform="translate(0 1)"
+                                    >
+                                      <ellipse
+                                        class="ant-empty-img-simple-ellipse"
+                                        cx="32"
+                                        cy="33"
+                                        rx="32"
+                                        ry="7"
+                                      />
+                                      <g
+                                        class="ant-empty-img-simple-g"
+                                        fill-rule="nonzero"
+                                      >
+                                        <path
+                                          d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                                        />
+                                        <path
+                                          class="ant-empty-img-simple-path"
+                                          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                                        />
+                                      </g>
+                                    </g>
+                                  </svg>
+                                </div>
+                                <div
+                                  class="ant-empty-description"
+                                >
+                                  No Data
+                                </div>
+                              </div>
                             </td>
                           </tr>
                         </tbody>
@@ -115,86 +125,6 @@ exports[`<List/> JSON Rest Server renders given data 1`] = `
                     </div>
                   </div>
                 </div>
-                <ul
-                  class="ant-pagination ant-table-pagination ant-table-pagination-right"
-                  unselectable="unselectable"
-                >
-                  <li
-                    aria-disabled="true"
-                    class="ant-pagination-prev ant-pagination-disabled"
-                    title="Previous Page"
-                  >
-                    <button
-                      class="ant-pagination-item-link"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <span
-                        aria-label="left"
-                        class="anticon anticon-left"
-                        role="img"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          data-icon="left"
-                          fill="currentColor"
-                          focusable="false"
-                          height="1em"
-                          viewBox="64 64 896 896"
-                          width="1em"
-                        >
-                          <path
-                            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </li>
-                  <li
-                    class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-                    tabindex="0"
-                    title="1"
-                  >
-                    <a
-                      rel="nofollow"
-                    >
-                      1
-                    </a>
-                  </li>
-                  <li
-                    aria-disabled="true"
-                    class="ant-pagination-next ant-pagination-disabled"
-                    title="Next Page"
-                  >
-                    <button
-                      class="ant-pagination-item-link"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <span
-                        aria-label="right"
-                        class="anticon anticon-right"
-                        role="img"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          data-icon="right"
-                          fill="currentColor"
-                          focusable="false"
-                          height="1em"
-                          viewBox="64 64 896 896"
-                          width="1em"
-                        >
-                          <path
-                            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                          />
-                        </svg>
-                      </span>
-                    </button>
-                  </li>
-                </ul>
               </div>
             </div>
           </div>
diff --git a/src/components/crud/list/index.spec.tsx b/src/components/crud/list/index.spec.tsx
index dab61f9ad23d..bb3b16e616bc 100644
--- a/src/components/crud/list/index.spec.tsx
+++ b/src/components/crud/list/index.spec.tsx
@@ -1,13 +1,9 @@
 import React, { ReactNode } from "react";
 
-import {
-    render,
-    TestWrapper,
-    MockJSONServer,
-    waitForElementToBeRemoved,
-} from "@test";
+import { render, TestWrapper, MockJSONServer } from "@test";
 
-import { Table, Column } from "@components";
+import { Column } from "@components";
+import { Table } from "antd";
 
 import { List } from "./index";
 import { Route } from "react-router-dom";
@@ -30,7 +26,7 @@ describe("<List/>", () => {
                 </List>,
             );
 
-            await waitForElementToBeRemoved(() => getByText("No Data"));
+            getByText("No Data");
         });
         it("renders given data", async () => {
             const { container } = renderList(
diff --git a/src/components/crud/list/index.tsx b/src/components/crud/list/index.tsx
index c61d12dcac54..626aab84037f 100644
--- a/src/components/crud/list/index.tsx
+++ b/src/components/crud/list/index.tsx
@@ -3,7 +3,6 @@ import { Card, Row, Col } from "antd";
 import humanizeString from "humanize-string";
 import { useParams } from "react-router-dom";
 
-import { TableProps } from "@components/table";
 import { useResourceWithRoute, useTranslate } from "@hooks";
 import { OptionalComponent } from "@definitions";
 import { CreateButton } from "@components";
@@ -12,18 +11,12 @@ import { ResourceRouterParams } from "@interfaces";
 export interface ListProps {
     resourceName: string;
     canCreate?: boolean;
-    canEdit?: boolean;
-    canDelete?: boolean;
-    canShow?: boolean;
     aside?: React.FC;
     title?: string;
 }
 
 export const List: React.FC<ListProps> = ({
     canCreate,
-    canEdit,
-    canDelete,
-    canShow,
     aside,
     title,
     children,
@@ -31,18 +24,6 @@ export const List: React.FC<ListProps> = ({
     const { resource: routeResourceName } = useParams<ResourceRouterParams>();
 
     const resource = useResourceWithRoute(routeResourceName);
-
-    const childrenWithProps = React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-            return React.cloneElement<TableProps>(child, {
-                resourceName: resource.name,
-                canEdit,
-                canDelete,
-                canShow,
-            });
-        }
-        return child;
-    });
     const translate = useTranslate();
 
     return (
@@ -59,7 +40,7 @@ export const List: React.FC<ListProps> = ({
                     }
                     extra={canCreate && <CreateButton size="middle" />}
                 >
-                    {childrenWithProps}
+                    {children}
                 </Card>
             </Col>
 
diff --git a/src/components/table/index.ts b/src/components/table/index.ts
index bd65a22c0d27..40b494c5f873 100644
--- a/src/components/table/index.ts
+++ b/src/components/table/index.ts
@@ -1,2 +1 @@
-export { Table, TableProps } from "./table";
 export * from "./components";
diff --git a/src/components/table/table/index.spec.tsx b/src/components/table/table/index.spec.tsx
deleted file mode 100644
index d4740112f6d8..000000000000
--- a/src/components/table/table/index.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-
-import { TestWrapper, MockJSONServer, render } from "@test";
-
-import { List } from "@components";
-import { Table } from "./index";
-
-describe("Table", () => {
-    it("Should render table succesfully", async () => {
-        const { getByTestId } = render(
-            <List key="posts" resourceName="posts">
-                <Table rowKey="id" filter={{ categoryId: [38] }}></Table>
-            </List>,
-            {
-                wrapper: TestWrapper({
-                    dataProvider: MockJSONServer,
-                    resources: [{ name: "posts" }],
-                }),
-            },
-        );
-
-        expect(getByTestId("ant-tab")).toBeDefined();
-    });
-});
diff --git a/src/components/table/table/index.tsx b/src/components/table/table/index.tsx
deleted file mode 100644
index 438c5ada75ea..000000000000
--- a/src/components/table/table/index.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useState } from "react";
-import { Table as AntdTable, Space } from "antd";
-import {
-    TablePaginationConfig,
-    TableProps as AntdTableProps,
-} from "antd/lib/table";
-
-import { Column, EditButton, DeleteButton, ShowButton } from "@components";
-import { Filters, Sort } from "@interfaces";
-import { useList, useTranslate } from "@hooks";
-import {
-    getDefaultSortOrder,
-    getDefaultFilteredValue,
-} from "@definitions/table";
-
-export interface TableProps extends AntdTableProps<any> {
-    resourceName?: string;
-    canEdit?: boolean;
-    canDelete?: boolean;
-    canShow?: boolean;
-    filter?: { [key: string]: number[] | string[] };
-}
-
-export const Table: React.FC<TableProps> = ({
-    resourceName,
-    pagination,
-    canEdit,
-    canDelete,
-    canShow,
-    children,
-    filter,
-    ...rest
-}) => {
-    const defaultCurrent = 1;
-    const defaultPageSize = 10;
-
-    const permanentFilter = filter;
-
-    if (!resourceName) {
-        throw new Error(`resource not found!`);
-    }
-
-    const [current, setCurrent] = useState(
-        (pagination && pagination.current) || defaultCurrent,
-    );
-    const [pageSize, setPageSize] = useState(
-        (pagination && pagination.pageSize) || defaultPageSize,
-    );
-
-    const [sort, setSort] = useState<Sort>(getDefaultSortOrder(children));
-    const [filters, setFilters] = useState<Filters>(
-        getDefaultFilteredValue(children),
-    );
-
-    const { data, isFetching, refetch } = useList(resourceName, {
-        pagination: { current, pageSize },
-        filters: { ...permanentFilter, ...filters },
-        sort,
-    });
-
-    const translate = useTranslate();
-
-    const onChange = (
-        pagination: TablePaginationConfig,
-        filters: Filters,
-        sorter: Sort,
-    ) => {
-        const { current, pageSize } = pagination;
-        setCurrent(current || defaultCurrent);
-        setPageSize(pageSize || defaultPageSize);
-
-        setFilters(filters);
-        setSort(sorter);
-
-        refetch();
-    };
-
-    const renderActions = (): React.ReactNode => {
-        if (canEdit || canDelete || canShow) {
-            return (
-                <Column
-                    title={translate("common:table.actions", "Actions")}
-                    dataIndex="actions"
-                    key="actions"
-                    render={(
-                        _text: string | number,
-                        record: {
-                            id: string | number;
-                        },
-                    ): React.ReactNode => (
-                        <Space>
-                            {canEdit && (
-                                <EditButton
-                                    size="small"
-                                    recordItemId={record.id}
-                                />
-                            )}
-                            {canDelete && (
-                                <DeleteButton
-                                    size="small"
-                                    recordItemId={record.id}
-                                />
-                            )}
-                            {canShow && (
-                                <ShowButton
-                                    size="small"
-                                    recordItemId={record.id}
-                                />
-                            )}
-                        </Space>
-                    )}
-                />
-            );
-        }
-
-        return null;
-    };
-
-    return (
-        <>
-            <AntdTable
-                data-testid="ant-tab"
-                style={{ width: "100%" }}
-                dataSource={data?.data}
-                loading={isFetching}
-                pagination={{
-                    ...pagination,
-                    current,
-                    pageSize,
-                    total: data?.total,
-                }}
-                onChange={onChange}
-                {...rest}
-            >
-                {children}
-                {renderActions()}
-            </AntdTable>
-        </>
-    );
-};
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index aed5a5b6f4b4..bb5f2a2d1e32 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -6,3 +6,4 @@ export * from "./useFileUploadState";
 export * from "./useListResourceQueries";
 export * from "./translate";
 export * from "./admin";
+export * from "./table";
diff --git a/src/hooks/table/index.ts b/src/hooks/table/index.ts
new file mode 100644
index 000000000000..3335d395ab12
--- /dev/null
+++ b/src/hooks/table/index.ts
@@ -0,0 +1 @@
+export { useTable } from "./useTable";
diff --git a/src/hooks/table/useTable.spec.ts b/src/hooks/table/useTable.spec.ts
new file mode 100644
index 000000000000..cc2d17364438
--- /dev/null
+++ b/src/hooks/table/useTable.spec.ts
@@ -0,0 +1,69 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import { MockJSONServer, TestWrapper } from "@test";
+
+import { useTable } from "./useTable";
+
+const defaultPagination = {
+    pageSize: 10,
+    current: 1,
+    defaultPageSize: 10,
+    defaultCurrent: 1,
+    total: 2,
+};
+
+const customPagination = {
+    current: 2,
+    defaultCurrent: 2,
+    defaultPageSize: 1,
+    pageSize: 1,
+    total: 2,
+};
+
+describe("useTable Hook", () => {
+    it("default", async () => {
+        const { result, waitFor } = renderHook(() => useTable({}), {
+            wrapper: TestWrapper({
+                dataProvider: MockJSONServer,
+                resources: [{ name: "posts" }],
+            }),
+        });
+
+        await waitFor(() => {
+            return !result.current.tableProps.loading;
+        });
+
+        const {
+            tableProps: { pagination, dataSource },
+        } = result.current;
+
+        expect(dataSource).toHaveLength(2);
+        expect(pagination).toEqual(defaultPagination);
+    });
+
+    it("with initial pagination parameters", async () => {
+        const { result, waitFor } = renderHook(
+            () =>
+                useTable({
+                    initialCurrent: customPagination.defaultCurrent,
+                    initialPageSize: customPagination.defaultPageSize,
+                }),
+            {
+                wrapper: TestWrapper({
+                    dataProvider: MockJSONServer,
+                    resources: [{ name: "posts" }],
+                }),
+            },
+        );
+
+        await waitFor(() => {
+            return !result.current.tableProps.loading;
+        });
+
+        const {
+            tableProps: { pagination },
+        } = result.current;
+
+        expect(pagination).toEqual(customPagination);
+    });
+});
diff --git a/src/hooks/table/useTable.ts b/src/hooks/table/useTable.ts
new file mode 100644
index 000000000000..2c3e931f4703
--- /dev/null
+++ b/src/hooks/table/useTable.ts
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { useFormTable } from "sunflower-antd";
+import { TablePaginationConfig } from "antd/lib/table";
+
+import { useResourceWithRoute, useList } from "@hooks";
+
+import { Filters, Sort, ResourceRouterParams } from "@interfaces";
+
+type useTableProps = {
+    permanentFilter?: { [key: string]: number[] | string[] };
+    initialCurrent?: number;
+    initialPageSize?: number;
+    initialSorter?: Sort;
+    initialFilter?: Filters;
+};
+
+export const useTable = ({
+    permanentFilter,
+    initialCurrent,
+    initialPageSize,
+    initialSorter,
+    initialFilter,
+}: useTableProps): any => {
+    const defaultCurrent = 1;
+    const defaultPageSize = 10;
+
+    const { tableProps: tablePropsSunflower } = useFormTable({
+        defaultCurrent: initialCurrent ?? defaultCurrent,
+        defaultPageSize: initialPageSize ?? defaultPageSize,
+    });
+
+    const { resource: routeResourceName } = useParams<ResourceRouterParams>();
+
+    const resource = useResourceWithRoute(routeResourceName);
+
+    const [sorter, setSorter] = useState<Sort | undefined>(initialSorter);
+    const [filters, setFilters] = useState<Filters | undefined>(initialFilter);
+
+    const { current, pageSize } = tablePropsSunflower.pagination;
+
+    const { data, isFetching, refetch } = useList(resource.name, {
+        pagination: { current, pageSize },
+        filters: { ...permanentFilter, ...filters },
+        sort: sorter,
+    });
+
+    const onChange = (
+        pagination: TablePaginationConfig,
+        filters: Filters,
+        sorter: Sort,
+    ) => {
+        setFilters(filters);
+        setSorter(sorter);
+
+        tablePropsSunflower.onChange(pagination, filters, sorter);
+
+        refetch();
+    };
+
+    return {
+        tableProps: {
+            ...tablePropsSunflower,
+            dataSource: data?.data,
+            loading: isFetching,
+            onChange,
+            pagination: {
+                ...tablePropsSunflower.pagination,
+                total: data?.total,
+            },
+        },
+    };
+};