Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a38c26c

Browse files
Init
1 parent bad6d82 commit a38c26c

40 files changed

+27112
-1
lines changed

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/node_modules
2+
/lib
3+
/cjs
4+
/esm
5+
/dist

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.md

‎.prettierrc

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSpacing": true,
4+
"endOfLine": "auto",
5+
"htmlWhitespaceSensitivity": "css",
6+
"insertPragma": false,
7+
"jsxBracketSameLine": false,
8+
"jsxSingleQuote": false,
9+
"printWidth": 100,
10+
"proseWrap": "preserve",
11+
"quoteProps": "as-needed",
12+
"requirePragma": false,
13+
"semi": true,
14+
"singleQuote": false,
15+
"tabWidth": 4,
16+
"trailingComma": "es5",
17+
"useTabs": true
18+
}

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 nobo
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 206 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,206 @@
1-
# table-basic
1+
# react-widget-table-basic
2+
3+
Table基础组件
4+
5+
6+
## 安装
7+
8+
```
9+
npm install --save react-widget-table-basic
10+
```
11+
12+
## 使用
13+
14+
[![Edit react-widget-table-basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-widget-table-basic-jujcd?fontsize=14&hidenavigation=1&theme=dark)
15+
16+
```js
17+
import TableBasic from 'react-widget-table-basic';
18+
import 'react-widget-table-basic/style';
19+
20+
const dataSource = [
21+
{
22+
key: '1',
23+
name: '胡彦斌',
24+
age: 32,
25+
address: '西湖区湖底公园1号',
26+
},
27+
{
28+
key: '2',
29+
name: '胡彦祖',
30+
age: 42,
31+
address: '西湖区湖底公园1号',
32+
},
33+
];
34+
35+
const columns = [
36+
{
37+
title: '姓名',
38+
dataIndex: 'name',
39+
key: 'name',
40+
},
41+
{
42+
title: '年龄',
43+
dataIndex: 'age',
44+
key: 'age',
45+
},
46+
{
47+
title: '住址',
48+
dataIndex: 'address',
49+
key: 'address',
50+
},
51+
];
52+
53+
<TableBasic data={dataSource} columns={columns} />;
54+
55+
```
56+
57+
### Interfaces
58+
59+
```ts
60+
export interface TableBasicProps<T = DataType> {
61+
prefixCls?: string;
62+
className?: string;
63+
style?: React.CSSProperties;
64+
columns: Column<T>[];
65+
data: T[];
66+
tableLayout?: "auto" | "fixed";
67+
getHeaderRowProps?: (props: RenderProps, columns: TCell<Column<T>>[], index: number) => RenderProps;
68+
getRowProps?: (props: RenderProps, data: T, index: number) => RenderProps;
69+
getRowKey: (data: T, index: number) => React.Key;
70+
getRowClassName?: (data: T, index: number) => string;
71+
showHeader?: boolean;
72+
showBody?: boolean;
73+
emptyText?: React.ReactNode;
74+
emptyRender(props: RenderProps): React.ReactNode;
75+
tableRender(props: RenderProps): React.ReactNode;
76+
headerRender: (props: RenderProps) => React.ReactElement | null;
77+
headerRowRender: (props: RenderProps) => React.ReactElement | null;
78+
headerCellRender: (props: RenderProps) => React.ReactElement | null;
79+
bodyRender: (props: RenderProps) => React.ReactElement | null;
80+
bodyRowRender: (props: RenderProps) => React.ReactElement | null;
81+
bodyCellRender: (props: RenderProps) => React.ReactElement | null;
82+
}
83+
export interface TableBasicState<T = DataType> {
84+
columns: Column<T>[];
85+
flattenColumns: Column<T>[];
86+
columnStore: TreeStore;
87+
leafColumns: Column<T>[];
88+
computedColumn: TCell<Column<T>>[][];
89+
}
90+
91+
export declare type DataType = Record<any, any>;
92+
export interface Column<T = DataType> {
93+
title?: React.ReactNode;
94+
dataIndex?: string | number;
95+
width?: string | number;
96+
minWidth?: string | number;
97+
maxWidth?: string | number;
98+
className?: string;
99+
key?: string | number;
100+
align?: "left" | "center" | "right";
101+
ellipsis?: boolean;
102+
children?: Column<T>[];
103+
render?: (text: any, data: T, index: number) => React.ReactNode;
104+
headerRender?: (text: any, column: Column<T>, index: number) => React.ReactNode;
105+
getCellProps?: (props: RenderProps, data: T, index: number) => RenderProps;
106+
getHeaderCellProps?: (props: RenderProps, column: Column<T>, index: number) => RenderProps;
107+
}
108+
export interface RenderProps extends React.AllHTMLAttributes<any> {
109+
key?: React.Key;
110+
ref?: React.Ref<any>;
111+
children: React.ReactNode;
112+
[x: string]: any;
113+
}
114+
115+
```
116+
117+
### defaultProps
118+
119+
```js
120+
{
121+
prefixCls: "rw-table",
122+
tableLayout: "auto",
123+
columns: [],
124+
data: [],
125+
showHeader: true,
126+
showBody: true,
127+
128+
getRowKey(data, index) {
129+
return data["key"] ?? index;
130+
},
131+
132+
emptyText: "No Data.",
133+
134+
emptyRender(props) {
135+
return <div {...props} />;
136+
},
137+
tableRender(props) {
138+
return <table {...props} />;
139+
},
140+
headerRender(props) {
141+
return <thead {...props} />;
142+
},
143+
headerRowRender(props) {
144+
return <tr {...props} />;
145+
},
146+
headerCellRender(props) {
147+
return <th {...props} />;
148+
},
149+
bodyRender(props) {
150+
return <tbody {...props} />;
151+
},
152+
bodyRowRender(props) {
153+
return <tr {...props} />;
154+
},
155+
bodyCellRender(props) {
156+
return <td {...props} />;
157+
},
158+
}
159+
```
160+
161+
### 基础样式
162+
163+
```css
164+
.rw-table {
165+
width: 100%;
166+
table-layout: auto;
167+
text-align: left;
168+
border-style: solid;
169+
border-width: 1px 0 0 1px;
170+
border-color: #e8e8e8;
171+
}
172+
173+
.rw-table-head-cell {
174+
padding: 4px 10px;
175+
background-color: #fafafa;
176+
border-color: #e8e8e8;
177+
border-style: solid;
178+
border-width: 0 1px 1px 0;
179+
line-height: 28px;
180+
color: rgba(0, 0, 0, 0.85);
181+
overflow-wrap: break-word;
182+
}
183+
184+
.rw-table-body-cell {
185+
padding: 4px 10px;
186+
border-color: #e8e8e8;
187+
border-style: solid;
188+
border-width: 0 1px 1px 0;
189+
line-height: 28px;
190+
background-color: #fff;
191+
overflow-wrap: break-word;
192+
}
193+
194+
.rw-table-cell-ellipsis {
195+
overflow: hidden;
196+
white-space: nowrap;
197+
word-wrap: normal;
198+
text-overflow: ellipsis;
199+
}
200+
201+
.rw-table-empty-text {
202+
background-color: #fff;
203+
text-align: center;
204+
}
205+
206+
```

‎babel.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = api => {
2+
const isTest = api.env("test");
3+
if (!isTest) return {};
4+
5+
return {
6+
presets: [
7+
[
8+
"babel-preset-packez",
9+
{
10+
modules: "cjs",
11+
},
12+
],
13+
],
14+
};
15+
};

‎docs/asset-manifest.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"index.css": "static/css/index.cd0264f4.chunk.css",
3+
"index.js": "static/js/index.cd0264f4.chunk.js",
4+
"runtime-index.js": "static/js/runtime-index.92eae014.js",
5+
"static/js/2.9294af22.chunk.js": "static/js/2.9294af22.chunk.js",
6+
"index.html": "index.html"
7+
}

‎docs/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!doctype html><html><head><meta charset="utf-8"/><title>Table Basic</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.cd0264f4.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.9294af22.chunk.js"></script><script src="static/js/index.cd0264f4.chunk.js"></script></body></html>

‎docs/static/css/index.cd0264f4.chunk.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/2.9294af22.chunk.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /