Skip to content

Commit

Permalink
Add useTable (refinedev#217)
Browse files Browse the repository at this point in the history 
* add useTable.

* add tests

* remove old table. export antd table. modify list.

* update examples

* update tests
  • Loading branch information
@mhrrmk
mhrrmk authored Mar 10, 2021
1 parent a4bbaa3 commit 2e85dcf
Show file tree
Hide file tree
Showing 23 changed files with 431 additions and 450 deletions.
8 changes: 7 additions & 1 deletion example/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

27 changes: 26 additions & 1 deletion example/src/components/pages/category.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}}
Expand All @@ -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>
);
Expand Down
7 changes: 6 additions & 1 deletion example/src/components/pages/files.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}}
Expand Down
7 changes: 6 additions & 1 deletion example/src/components/pages/images.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}}
Expand Down
27 changes: 26 additions & 1 deletion example/src/components/pages/landing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}}
Expand All @@ -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>
);
Expand Down
31 changes: 30 additions & 1 deletion example/src/components/pages/post-light.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}}
Expand Down Expand Up @@ -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>
);
Expand Down
50 changes: 45 additions & 5 deletions example/src/components/pages/post.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from "react";
import {
List,
Table,
Column,
Create,
Edit,
Expand All @@ -22,6 +21,12 @@ import {
useApiUrl,
useFileUploadState,
useTranslate,
Table,
useTable,
Space,
EditButton,
DeleteButton,
ShowButton,
} from "readmin";

import ReactMarkdown from "react-markdown";
Expand All @@ -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"
Expand Down Expand Up @@ -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>
);
Expand Down
36 changes: 31 additions & 5 deletions example/src/components/pages/tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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,
],
};

Expand All @@ -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",
}}
Expand Down Expand Up @@ -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>
);
Expand Down
Loading

0 comments on commit 2e85dcf

Please sign in to comment.