mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2024-11-21 03:15:49 +08:00
tanbowensg
Bowen Tan
parent
4581d2a7f7
commit
f12d05de8e
@ -18,7 +18,7 @@ const SpaceImpl: ComponentImpl<Static<typeof SpacePropsSchema>> = (props) => {
|
||||
const cProps = getComponentProps(props);
|
||||
|
||||
return (
|
||||
<BaseSpace ref={elementRef} className={css(customStyle?.content)} {...cProps} size="large">
|
||||
<BaseSpace ref={elementRef} className={css(customStyle?.content)} {...cProps}>
|
||||
{slotsElements.content}
|
||||
</BaseSpace>
|
||||
);
|
||||
@ -28,7 +28,7 @@ const exampleProperties: Static<typeof SpacePropsSchema> = {
|
||||
align: "center",
|
||||
direction: "vertical",
|
||||
wrap: false,
|
||||
size: "mini",
|
||||
size: "large",
|
||||
};
|
||||
export const Space = implementRuntimeComponent({
|
||||
version: "arco/v1",
|
||||
|
||||
@ -2,11 +2,14 @@ import { Layout, Menu, Typography } from "@arco-design/web-react";
|
||||
import React, { useState } from "react";
|
||||
import { ButtonDemoPage } from "./pages/Button";
|
||||
import { TreeDemoPage } from "./pages/Tree";
|
||||
import { TableDemoPage } from "./pages/table";
|
||||
|
||||
|
||||
const { Sider, Content, Header } = Layout;
|
||||
const ContentMap: Record<string, React.FC> = {
|
||||
Button: ButtonDemoPage,
|
||||
Tree: TreeDemoPage,
|
||||
Table: TableDemoPage,
|
||||
};
|
||||
|
||||
export const ExampleIndexPage: React.FC = () => {
|
||||
|
||||
793
packages/arco-lib/src/examples/pages/table/attributes.ts
Normal file
793
packages/arco-lib/src/examples/pages/table/attributes.ts
Normal file
@ -0,0 +1,793 @@
|
||||
import { Application } from "@sunmao-ui/core";
|
||||
|
||||
|
||||
export const attributes: Application = {
|
||||
"kind": "Application",
|
||||
"version": "example/v1",
|
||||
"metadata": {
|
||||
"name": "attributesExample",
|
||||
"description": "demonstrating the use of different property"
|
||||
},
|
||||
"spec": {
|
||||
"components": [
|
||||
{
|
||||
"id": "space1",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "vertical",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/style",
|
||||
"properties": {
|
||||
"styles": [
|
||||
{
|
||||
"styleSlot": "content",
|
||||
"style": "align-items: flex-start !important;\nwidth:800px;"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "space6",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "horizontal",
|
||||
"wrap": true,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space1",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/style",
|
||||
"properties": {
|
||||
"styles": []
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "border_space",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "horizontal",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space6",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "border",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "Border",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "border_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "border_switch",
|
||||
"type": "arco/v1/Switch",
|
||||
"properties": {
|
||||
"defaultChecked": false,
|
||||
"disabled": false,
|
||||
"loading": false,
|
||||
"type": "circle",
|
||||
"size": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "border_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "border_cell_space",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "horizontal",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space6",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bordercell",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "Border Cell",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "border_cell_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "border_cell_switch",
|
||||
"type": "arco/v1/Switch",
|
||||
"properties": {
|
||||
"defaultChecked": false,
|
||||
"disabled": false,
|
||||
"loading": false,
|
||||
"type": "circle",
|
||||
"size": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "border_cell_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "strip_space",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "horizontal",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space6",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "strip",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "Strip",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "strip_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "strip_switch",
|
||||
"type": "arco/v1/Switch",
|
||||
"properties": {
|
||||
"defaultChecked": false,
|
||||
"disabled": false,
|
||||
"loading": false,
|
||||
"type": "circle",
|
||||
"size": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "strip_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "loading_space",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "horizontal",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space6",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "loading",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "Loading",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "loading_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "loading_switch",
|
||||
"type": "arco/v1/Switch",
|
||||
"properties": {
|
||||
"defaultChecked": false,
|
||||
"disabled": false,
|
||||
"loading": false,
|
||||
"type": "circle",
|
||||
"size": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "loading_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout_fixed_space",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "horizontal",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space6",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout_fixed",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "Layout Fixed",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "layout_fixed_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout_fixed_switch",
|
||||
"type": "arco/v1/Switch",
|
||||
"properties": {
|
||||
"defaultChecked": false,
|
||||
"disabled": false,
|
||||
"loading": false,
|
||||
"type": "circle",
|
||||
"size": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "layout_fixed_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "size_space",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "horizontal",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space1",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/event",
|
||||
"properties": {
|
||||
"handlers": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/style",
|
||||
"properties": {
|
||||
"styles": []
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "size",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "Size",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "size_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "radio10",
|
||||
"type": "arco/v1/radio",
|
||||
"properties": {
|
||||
"options": "{{\n[\n {\n \"label\": \"default\",\n \"value\": \"default\",\n },\n {\n \"label\": \"middle\",\n \"value\": \"middle\",\n },\n {\n \"label\": \"small\",\n \"value\": \"small\",\n },\n {\n \"label\": \"mini\",\n \"value\": \"mini\",\n }\n]\n}}",
|
||||
"type": "button",
|
||||
"defaultCheckedValue": "default",
|
||||
"direction": "horizontal",
|
||||
"size": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "size_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/style",
|
||||
"properties": {
|
||||
"styles": [
|
||||
{
|
||||
"styleSlot": "group",
|
||||
"style": "width:100%"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "pagination_position_space",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "horizontal",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space1",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/event",
|
||||
"properties": {
|
||||
"handlers": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/style",
|
||||
"properties": {
|
||||
"styles": []
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "pagination_position",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "Pagination position",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "pagination_position_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "page_position",
|
||||
"type": "arco/v1/radio",
|
||||
"properties": {
|
||||
"options": "{{\n[\n {label: 'BottomRight', value: 'br'},\n {label: 'BottomLeft', value: 'bl'},\n {label: 'TopRight', value: 'tr'},\n {label: 'TopLeft', value: 'tl'},\n {label: 'TopCenter', value: 'topCenter'},\n {label: 'BottomCenter', value: 'bottomCenter'},\n]\n\n}}",
|
||||
"type": "button",
|
||||
"defaultCheckedValue": "default",
|
||||
"direction": "horizontal",
|
||||
"size": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "pagination_position_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "per_page_size_space",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "horizontal",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space1",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/event",
|
||||
"properties": {
|
||||
"handlers": []
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/style",
|
||||
"properties": {
|
||||
"styles": []
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "per_page_size",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "Per Page Size",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "per_page_size_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "per_page_size_input",
|
||||
"type": "arco/v1/input",
|
||||
"properties": {
|
||||
"allowClear": false,
|
||||
"disabled": false,
|
||||
"readOnly": false,
|
||||
"defaultValue": "10",
|
||||
"placeholder": "please input",
|
||||
"error": false,
|
||||
"size": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "per_page_size_space",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "table2",
|
||||
"type": "arco/v1/table",
|
||||
"properties": {
|
||||
"columns": [
|
||||
{
|
||||
"title": "Name",
|
||||
"dataIndex": "name",
|
||||
"sorter": false,
|
||||
"sortDirections": [
|
||||
"ascend",
|
||||
"descend"
|
||||
],
|
||||
"defaultSortOrder": "ascend",
|
||||
"type": "text",
|
||||
"filter": false
|
||||
},
|
||||
{
|
||||
"title": "Salary",
|
||||
"dataIndex": "salary",
|
||||
"sorter": false,
|
||||
"filter": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"title": "Time",
|
||||
"dataIndex": "time",
|
||||
"sorter": false,
|
||||
"filter": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"title": "Link",
|
||||
"dataIndex": "link",
|
||||
"type": "link",
|
||||
"filter": false,
|
||||
"sorter": false
|
||||
}
|
||||
],
|
||||
"data": [
|
||||
{
|
||||
"key": "key 0",
|
||||
"name": "xzdry0",
|
||||
"link": "link-B",
|
||||
"salary": 59,
|
||||
"time": "2021-7-11T1:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 1",
|
||||
"name": "xzdry1",
|
||||
"link": "link-A",
|
||||
"salary": 371,
|
||||
"time": "2021-1-11T11:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 2",
|
||||
"name": "Kevin Sandra2",
|
||||
"link": "link-A",
|
||||
"salary": 779,
|
||||
"time": "2021-10-11T4:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 3",
|
||||
"name": "Kevin Sandra3",
|
||||
"link": "link-A",
|
||||
"salary": 107,
|
||||
"time": "2021-7-11T4:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 4",
|
||||
"name": "Kevin Sandra4",
|
||||
"link": "link-A",
|
||||
"salary": 610,
|
||||
"time": "2021-7-11T11:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 5",
|
||||
"name": "xzdry5",
|
||||
"link": "link-A",
|
||||
"salary": 297,
|
||||
"time": "2021-6-11T8:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 6",
|
||||
"name": "xzdry6",
|
||||
"link": "link-A",
|
||||
"salary": 799,
|
||||
"time": "2021-0-11T9:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 7",
|
||||
"name": "xzdry7",
|
||||
"link": "link-B",
|
||||
"salary": 242,
|
||||
"time": "2021-10-11T0:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 8",
|
||||
"name": "xzdry8",
|
||||
"link": "link-B",
|
||||
"salary": 798,
|
||||
"time": "2021-2-11T2:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 9",
|
||||
"name": "xzdry9",
|
||||
"link": "link-B",
|
||||
"salary": 947,
|
||||
"time": "2021-1-11T9:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 10",
|
||||
"name": "Kevin Sandra10",
|
||||
"link": "link-B",
|
||||
"salary": 927,
|
||||
"time": "2021-4-11T0:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 11",
|
||||
"name": "Kevin Sandra11",
|
||||
"link": "link-A",
|
||||
"salary": 463,
|
||||
"time": "2021-10-11T5:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 12",
|
||||
"name": "Kevin Sandra12",
|
||||
"link": "link-B",
|
||||
"salary": 396,
|
||||
"time": "2021-9-11T3:10:45.437Z"
|
||||
}
|
||||
],
|
||||
"pagination": {
|
||||
"pageSize": "{{Number(per_page_size_input.value)}}"
|
||||
},
|
||||
"tableLayoutFixed": "{{layout_fixed_switch.value}}",
|
||||
"borderCell": "{{border_cell_switch.value}}",
|
||||
"stripe": "{{strip_switch.value}}",
|
||||
"size": "{{radio10.checkedValue}}",
|
||||
"pagePosition": "{{page_position.checkedValue}}",
|
||||
"rowSelectionType": "{{radio3.checkedValue}}",
|
||||
"border": "{{border_switch.value}}",
|
||||
"loading": "{{loading_switch.value}}"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space1",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/style",
|
||||
"properties": {
|
||||
"styles": [
|
||||
{
|
||||
"styleSlot": "content",
|
||||
"style": "width:650px;"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
179
packages/arco-lib/src/examples/pages/table/basicUsage.ts
Normal file
179
packages/arco-lib/src/examples/pages/table/basicUsage.ts
Normal file
@ -0,0 +1,179 @@
|
||||
import { Application } from "@sunmao-ui/core";
|
||||
|
||||
export const basicUsage: Application = {
|
||||
"kind": "Application",
|
||||
"version": "example/v1",
|
||||
"metadata": {
|
||||
"name": "tableBasicUsage",
|
||||
"description": "table basic usage"
|
||||
},
|
||||
"spec": {
|
||||
"components": [
|
||||
{
|
||||
"id": "space1",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "vertical",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": []
|
||||
},
|
||||
{
|
||||
"id": "table2",
|
||||
"type": "arco/v1/table",
|
||||
"properties": {
|
||||
"columns": [
|
||||
{
|
||||
"title": "Name",
|
||||
"dataIndex": "name",
|
||||
"sorter": false,
|
||||
"sortDirections": [
|
||||
"ascend",
|
||||
"descend"
|
||||
],
|
||||
"defaultSortOrder": "ascend",
|
||||
"type": "text",
|
||||
"filter": false
|
||||
},
|
||||
{
|
||||
"title": "Salary",
|
||||
"dataIndex": "salary",
|
||||
"sorter": false,
|
||||
"filter": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"title": "Time",
|
||||
"dataIndex": "time",
|
||||
"sorter": false,
|
||||
"filter": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"title": "Link",
|
||||
"dataIndex": "link",
|
||||
"type": "link",
|
||||
"filter": false,
|
||||
"sorter": false
|
||||
}
|
||||
],
|
||||
"data": [
|
||||
{
|
||||
"key": "key 0",
|
||||
"name": "xzdry0",
|
||||
"link": "link-B",
|
||||
"salary": 59,
|
||||
"time": "2021-7-11T1:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 1",
|
||||
"name": "xzdry1",
|
||||
"link": "link-A",
|
||||
"salary": 371,
|
||||
"time": "2021-1-11T11:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 2",
|
||||
"name": "Kevin Sandra2",
|
||||
"link": "link-A",
|
||||
"salary": 779,
|
||||
"time": "2021-10-11T4:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 3",
|
||||
"name": "Kevin Sandra3",
|
||||
"link": "link-A",
|
||||
"salary": 107,
|
||||
"time": "2021-7-11T4:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 4",
|
||||
"name": "Kevin Sandra4",
|
||||
"link": "link-A",
|
||||
"salary": 610,
|
||||
"time": "2021-7-11T11:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 5",
|
||||
"name": "xzdry5",
|
||||
"link": "link-A",
|
||||
"salary": 297,
|
||||
"time": "2021-6-11T8:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 6",
|
||||
"name": "xzdry6",
|
||||
"link": "link-A",
|
||||
"salary": 799,
|
||||
"time": "2021-0-11T9:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 7",
|
||||
"name": "xzdry7",
|
||||
"link": "link-B",
|
||||
"salary": 242,
|
||||
"time": "2021-10-11T0:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 8",
|
||||
"name": "xzdry8",
|
||||
"link": "link-B",
|
||||
"salary": 798,
|
||||
"time": "2021-2-11T2:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 9",
|
||||
"name": "xzdry9",
|
||||
"link": "link-B",
|
||||
"salary": 947,
|
||||
"time": "2021-1-11T9:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 10",
|
||||
"name": "Kevin Sandra10",
|
||||
"link": "link-B",
|
||||
"salary": 927,
|
||||
"time": "2021-4-11T0:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 11",
|
||||
"name": "Kevin Sandra11",
|
||||
"link": "link-A",
|
||||
"salary": 463,
|
||||
"time": "2021-10-11T5:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 12",
|
||||
"name": "Kevin Sandra12",
|
||||
"link": "link-B",
|
||||
"salary": 396,
|
||||
"time": "2021-9-11T3:10:45.437Z"
|
||||
}
|
||||
],
|
||||
"pagination": {
|
||||
"pageSize": 6
|
||||
},
|
||||
"tableLayoutFixed": false,
|
||||
"borderCell": false,
|
||||
"stripe": false,
|
||||
"size": "default",
|
||||
"pagePosition": "bottomCenter",
|
||||
"rowSelectionType": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space1",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
49
packages/arco-lib/src/examples/pages/table/index.tsx
Normal file
49
packages/arco-lib/src/examples/pages/table/index.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { Divider, Typography } from "@arco-design/web-react";
|
||||
import { DemoWrapper } from "../../DemoWrapper";
|
||||
import { basicUsage } from "./basicUsage";
|
||||
import { selection } from "./selection";
|
||||
import { attributes } from "./attributes";
|
||||
import { sortAndFilter } from "./sortAndFilter";
|
||||
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
|
||||
export const TableDemoPage: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<Title heading={3}>Basic Usage</Title>
|
||||
<DemoWrapper application={basicUsage} />
|
||||
<Divider />
|
||||
<Title heading={3}>Selection</Title>
|
||||
<Paragraph>
|
||||
To enable selection, you can use radio or checkbox by setting the{" "}
|
||||
<Text code>Row Selection Type</Text>
|
||||
</Paragraph>
|
||||
<DemoWrapper application={selection} />
|
||||
<Divider />
|
||||
<Title heading={3}>Attributes</Title>
|
||||
<Paragraph>
|
||||
You can easily open or close the properties of the table
|
||||
</Paragraph>
|
||||
<DemoWrapper application={attributes} />
|
||||
<Divider />
|
||||
<Title heading={3}>Sort and filter</Title>
|
||||
<Paragraph>
|
||||
Configure the <Text code>sortable</Text> or <Text code>filterable</Text>{" "}
|
||||
of <Text code>Column</Text> to sort or filter the table
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
You can provide only <Text code>ascending</Text> or{" "}
|
||||
<Text code>descending</Text> order or both by setting the sortDirections
|
||||
value to <Text code>[’ascend’]</Text>,
|
||||
<Text code>[’descend’]</Text>,
|
||||
<Text code>[’ascend’,’descend’]</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
After that you can pick one of them as the default sort by setting{" "}
|
||||
<Text code>defaultSortOrder</Text>
|
||||
</Paragraph>
|
||||
<DemoWrapper application={sortAndFilter} />
|
||||
<Divider />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
213
packages/arco-lib/src/examples/pages/table/selection.ts
Normal file
213
packages/arco-lib/src/examples/pages/table/selection.ts
Normal file
@ -0,0 +1,213 @@
|
||||
import { Application } from "@sunmao-ui/core";
|
||||
|
||||
|
||||
export const selection: Application = {
|
||||
"kind": "Application",
|
||||
"version": "example/v1",
|
||||
"metadata": {
|
||||
"name": "selectionUsage",
|
||||
"description": "selectionUsage"
|
||||
},
|
||||
"spec": {
|
||||
"components": [
|
||||
{
|
||||
"id": "space1",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "vertical",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": []
|
||||
},
|
||||
{
|
||||
"id": "radio3",
|
||||
"type": "arco/v1/radio",
|
||||
"properties": {
|
||||
"options": [
|
||||
{
|
||||
"label": "checkbox",
|
||||
"value": "checkbox",
|
||||
"disabled": false
|
||||
},
|
||||
{
|
||||
"label": "radio",
|
||||
"value": "radio",
|
||||
"disabled": false
|
||||
}
|
||||
],
|
||||
"type": "button",
|
||||
"defaultCheckedValue": "checkbox",
|
||||
"direction": "horizontal",
|
||||
"size": "default"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space1",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "table2",
|
||||
"type": "arco/v1/table",
|
||||
"properties": {
|
||||
"columns": [
|
||||
{
|
||||
"title": "Name",
|
||||
"dataIndex": "name",
|
||||
"sorter": false,
|
||||
"sortDirections": [
|
||||
"ascend",
|
||||
"descend"
|
||||
],
|
||||
"defaultSortOrder": "ascend",
|
||||
"type": "text",
|
||||
"filter": false
|
||||
},
|
||||
{
|
||||
"title": "Salary",
|
||||
"dataIndex": "salary",
|
||||
"sorter": false,
|
||||
"filter": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"title": "Time",
|
||||
"dataIndex": "time",
|
||||
"sorter": false,
|
||||
"filter": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"title": "Link",
|
||||
"dataIndex": "link",
|
||||
"type": "link",
|
||||
"filter": false,
|
||||
"sorter": false
|
||||
}
|
||||
],
|
||||
"data": [
|
||||
{
|
||||
"key": "key 0",
|
||||
"name": "xzdry0",
|
||||
"link": "link-B",
|
||||
"salary": 59,
|
||||
"time": "2021-7-11T1:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 1",
|
||||
"name": "xzdry1",
|
||||
"link": "link-A",
|
||||
"salary": 371,
|
||||
"time": "2021-1-11T11:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 2",
|
||||
"name": "Kevin Sandra2",
|
||||
"link": "link-A",
|
||||
"salary": 779,
|
||||
"time": "2021-10-11T4:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 3",
|
||||
"name": "Kevin Sandra3",
|
||||
"link": "link-A",
|
||||
"salary": 107,
|
||||
"time": "2021-7-11T4:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 4",
|
||||
"name": "Kevin Sandra4",
|
||||
"link": "link-A",
|
||||
"salary": 610,
|
||||
"time": "2021-7-11T11:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 5",
|
||||
"name": "xzdry5",
|
||||
"link": "link-A",
|
||||
"salary": 297,
|
||||
"time": "2021-6-11T8:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 6",
|
||||
"name": "xzdry6",
|
||||
"link": "link-A",
|
||||
"salary": 799,
|
||||
"time": "2021-0-11T9:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 7",
|
||||
"name": "xzdry7",
|
||||
"link": "link-B",
|
||||
"salary": 242,
|
||||
"time": "2021-10-11T0:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 8",
|
||||
"name": "xzdry8",
|
||||
"link": "link-B",
|
||||
"salary": 798,
|
||||
"time": "2021-2-11T2:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 9",
|
||||
"name": "xzdry9",
|
||||
"link": "link-B",
|
||||
"salary": 947,
|
||||
"time": "2021-1-11T9:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 10",
|
||||
"name": "Kevin Sandra10",
|
||||
"link": "link-B",
|
||||
"salary": 927,
|
||||
"time": "2021-4-11T0:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 11",
|
||||
"name": "Kevin Sandra11",
|
||||
"link": "link-A",
|
||||
"salary": 463,
|
||||
"time": "2021-10-11T5:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 12",
|
||||
"name": "Kevin Sandra12",
|
||||
"link": "link-B",
|
||||
"salary": 396,
|
||||
"time": "2021-9-11T3:10:45.437Z"
|
||||
}
|
||||
],
|
||||
"pagination": {
|
||||
"pageSize": 6
|
||||
},
|
||||
"tableLayoutFixed": false,
|
||||
"borderCell": false,
|
||||
"stripe": false,
|
||||
"size": "default",
|
||||
"pagePosition": "bottomCenter",
|
||||
"rowSelectionType": "{{radio3.checkedValue}}"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space1",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
183
packages/arco-lib/src/examples/pages/table/sortAndFilter.ts
Normal file
183
packages/arco-lib/src/examples/pages/table/sortAndFilter.ts
Normal file
@ -0,0 +1,183 @@
|
||||
import { Application } from "@sunmao-ui/core";
|
||||
|
||||
|
||||
export const sortAndFilter: Application = {
|
||||
"kind": "Application",
|
||||
"version": "example/v1",
|
||||
"metadata": {
|
||||
"name": "sortAndFilter",
|
||||
"description": "sort and filter usage"
|
||||
},
|
||||
"spec": {
|
||||
"components": [
|
||||
{
|
||||
"id": "space32",
|
||||
"type": "arco/v1/space",
|
||||
"properties": {
|
||||
"align": "center",
|
||||
"direction": "vertical",
|
||||
"wrap": false,
|
||||
"size": "mini"
|
||||
},
|
||||
"traits": []
|
||||
},
|
||||
{
|
||||
"id": "table31",
|
||||
"type": "arco/v1/table",
|
||||
"properties": {
|
||||
"columns": [
|
||||
{
|
||||
"title": "Name",
|
||||
"dataIndex": "name",
|
||||
"sorter": true,
|
||||
"sortDirections": [
|
||||
"ascend",
|
||||
"descend"
|
||||
],
|
||||
"defaultSortOrder": "descend",
|
||||
"type": "text",
|
||||
"filter": true
|
||||
},
|
||||
{
|
||||
"title": "Salary",
|
||||
"dataIndex": "salary",
|
||||
"sorter": true,
|
||||
"filter": false,
|
||||
"type": "text",
|
||||
"sortDirections": "{{['ascend']}}"
|
||||
},
|
||||
{
|
||||
"title": "Time",
|
||||
"dataIndex": "time",
|
||||
"sorter": false,
|
||||
"filter": false,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"title": "Link",
|
||||
"dataIndex": "link",
|
||||
"type": "link",
|
||||
"filter": true,
|
||||
"sorter": false
|
||||
}
|
||||
],
|
||||
"data": [
|
||||
{
|
||||
"key": "key 0",
|
||||
"name": "Kevin Sandra0",
|
||||
"link": "link-A",
|
||||
"salary": 181,
|
||||
"time": "2021-0-11T2:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 1",
|
||||
"name": "Kevin Sandra1",
|
||||
"link": "link-B",
|
||||
"salary": 387,
|
||||
"time": "2021-3-11T1:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 2",
|
||||
"name": "Kevin Sandra2",
|
||||
"link": "link-B",
|
||||
"salary": 215,
|
||||
"time": "2021-5-11T14:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 3",
|
||||
"name": "xzdry3",
|
||||
"link": "link-B",
|
||||
"salary": 427,
|
||||
"time": "2021-10-11T9:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 4",
|
||||
"name": "Kevin Sandra4",
|
||||
"link": "link-A",
|
||||
"salary": 950,
|
||||
"time": "2021-10-11T6:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 5",
|
||||
"name": "xzdry5",
|
||||
"link": "link-B",
|
||||
"salary": 811,
|
||||
"time": "2021-8-11T5:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 6",
|
||||
"name": "Kevin Sandra6",
|
||||
"link": "link-A",
|
||||
"salary": 805,
|
||||
"time": "2021-5-11T5:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 7",
|
||||
"name": "Kevin Sandra7",
|
||||
"link": "link-B",
|
||||
"salary": 782,
|
||||
"time": "2021-8-11T14:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 8",
|
||||
"name": "xzdry8",
|
||||
"link": "link-A",
|
||||
"salary": 87,
|
||||
"time": "2021-3-11T6:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 9",
|
||||
"name": "Kevin Sandra9",
|
||||
"link": "link-A",
|
||||
"salary": 805,
|
||||
"time": "2021-0-11T11:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 10",
|
||||
"name": "xzdry10",
|
||||
"link": "link-B",
|
||||
"salary": 935,
|
||||
"time": "2021-10-11T4:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 11",
|
||||
"name": "xzdry11",
|
||||
"link": "link-A",
|
||||
"salary": 381,
|
||||
"time": "2021-0-11T14:10:45.437Z"
|
||||
},
|
||||
{
|
||||
"key": "key 12",
|
||||
"name": "Kevin Sandra12",
|
||||
"link": "link-B",
|
||||
"salary": 406,
|
||||
"time": "2021-2-11T13:10:45.437Z"
|
||||
}
|
||||
],
|
||||
"pagination": {
|
||||
"pageSize": 6
|
||||
},
|
||||
"tableLayoutFixed": false,
|
||||
"borderCell": false,
|
||||
"stripe": false,
|
||||
"size": "default",
|
||||
"pagePosition": "bottomCenter",
|
||||
"rowSelectionType": "default",
|
||||
"border": false,
|
||||
"loading": false
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "space32",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -59,6 +59,11 @@ export const TablePropsSchema = Type.Object({
|
||||
category: Category.Layout,
|
||||
weight: 1
|
||||
}),
|
||||
border: Type.Boolean({
|
||||
title: 'Border',
|
||||
category: Category.Style,
|
||||
weight: 2
|
||||
}),
|
||||
borderCell: Type.Boolean({
|
||||
title: 'Border Cell',
|
||||
description: 'Whether to display the table cell border',
|
||||
@ -93,7 +98,10 @@ export const TablePropsSchema = Type.Object({
|
||||
}),
|
||||
rowSelectionType: StringUnion(["checkbox", "radio", "default"], {
|
||||
title: 'Row Selection Type',
|
||||
weight: 3,
|
||||
category: Category.Style
|
||||
category: Category.Basic
|
||||
}),
|
||||
loading: Type.Boolean( {
|
||||
title: 'Loading',
|
||||
category: Category.Basic
|
||||
}),
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user