DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(@omiu/table): sticky and height props supported

This commit is contained in:
dntzhang 2021-07-25 12:54:50 +08:00
parent 3e001bfefc
commit 67e9b82138
14 changed files with 191 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/table/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@omiu/table",
"version": "0.0.7",
"version": "0.0.8",
"description": "Components that show list data structures.",
"docsExtend": {
"cnName": "表格控件",

2
components/table/src/demo.d.ts vendored
View File

@ -18,8 +18,8 @@ export default class Table extends WeElement {
})[];
columns: ({
title: string;
key: string;
render: (item: any) => JSX.Element;
key?: undefined;
align?: undefined;
} | {
title: string;

64
components/table/src/demo.js
View File

@ -365,7 +365,7 @@ exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1
// module
exports.push([module.i, ":host {\n display: block; }\n\n.o-table {\n background: white;\n margin: auto;\n padding: 5px;\n width: 100%;\n animation: float 5s infinite;\n border-spacing: 0;\n border-collapse: collapse;\n color: #606266;\n font-weight: 400; }\n\n.o-table-checkbox th:first-child,\n.o-table-checkbox td:first-child {\n padding: 2px 10px 2px; }\n\nth {\n border-bottom: 1px solid #E0E0E0;\n text-align: left;\n vertical-align: middle;\n padding: 10px 10px 10px;\n color: rgba(0, 0, 0, 0.54);\n font-size: 0.75rem;\n line-height: 1.3125rem;\n font-weight: 500;\n background: #fafafa; }\n\n.o-table-border td,\n.o-table-border th {\n border-right: 1px solid #ebeef5; }\n\n.o-table-border td:first-child,\n.o-table-border th:first-child {\n border-left: 1px solid #ebeef5; }\n\n.o-table-border th {\n border-top: 1px solid #ebeef5; }\n\ntr {\n border-bottom: 1px solid #E0E0E0; }\n\ntr:hover td {\n background: #f5f5f5; }\n\ntd {\n text-align: left;\n vertical-align: middle;\n font-size: 0.875rem;\n padding: 10px 10px 10px; }\n\ntd.compact,\nth.compact {\n padding: 4px 10px 4px; }\n\na {\n text-decoration: none; }\n\n.o-table-align-left {\n text-align: left; }\n\n.o-table-align-center {\n text-align: center; }\n\no-checkbox {\n height: 20px;\n vertical-align: middle; }\n\n.o-table-align-right {\n text-align: right; }\n\na,\na:link,\na:visited,\na:active {\n text-decoration: none;\n color: inherit; }\n\na:hover {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\no-checkbox {\n margin-right: 5px; }\n\n.o-table-stripe tr:nth-of-type(odd) {\n background: white; }\n\n.o-table-stripe tr:nth-of-type(even) {\n background: #fafafa; }\n\n.slide-fade-enter-active {\n transition: all .3s ease; }\n\n.slide-fade-leave-active {\n transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); }\n\n.slide-fade-enter,\n.slide-fade-leave-to {\n transform: translateX(-40px);\n opacity: 0; }\n", ""]);
exports.push([module.i, ":host {\n display: block; }\n\n.o-table {\n overflow: auto; }\n\n.o-table-table {\n background: white;\n margin: auto;\n padding: 5px;\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n color: #606266;\n font-weight: 400; }\n\n.o-table-checkbox th:first-child,\n.o-table-checkbox td:first-child {\n padding: 2px 10px 2px; }\n\nth {\n border-bottom: 1px solid #E0E0E0;\n text-align: left;\n vertical-align: middle;\n padding: 10px 10px 10px;\n color: rgba(0, 0, 0, 0.54);\n font-size: 0.75rem;\n line-height: 1.3125rem;\n font-weight: 500;\n background: #fafafa; }\n\nth.sticky {\n position: sticky;\n top: -1px;\n z-index: 1000; }\n\n.o-table-border td,\n.o-table-border th {\n border-right: 1px solid #ebeef5; }\n\n.o-table-border td:first-child,\n.o-table-border th:first-child {\n border-left: 1px solid #ebeef5; }\n\n.o-table-border th {\n border-top: 1px solid #ebeef5; }\n\ntr {\n border-bottom: 1px solid #E0E0E0; }\n\ntr:hover td {\n background: #f5f5f5; }\n\ntd {\n text-align: left;\n vertical-align: middle;\n font-size: 0.875rem;\n padding: 10px 10px 10px; }\n\ntd.compact,\nth.compact {\n padding: 4px 10px 4px; }\n\na {\n text-decoration: none; }\n\n.o-table-align-left {\n text-align: left; }\n\n.o-table-align-center {\n text-align: center; }\n\no-checkbox {\n height: 20px;\n vertical-align: middle; }\n\n.o-table-align-right {\n text-align: right; }\n\na,\na:link,\na:visited,\na:active {\n text-decoration: none;\n color: inherit; }\n\na:hover {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\no-checkbox {\n margin-right: 5px; }\n\n.o-table-stripe tr:nth-of-type(odd) {\n background: white; }\n\n.o-table-stripe tr:nth-of-type(even) {\n background: #fafafa; }\n\n.slide-fade-enter-active {\n transition: all .3s ease; }\n\n.slide-fade-leave-active {\n transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); }\n\n.slide-fade-enter,\n.slide-fade-leave-to {\n transform: translateX(-40px);\n opacity: 0; }\n", ""]);
// exports
@ -2801,8 +2801,7 @@ var Table = /** @class */ (function (_super) {
];
_this.columns = [{
title: 'ID',
key: 'id',
render: function (item) { return (omi_1.h("span", null, item.id)); },
render: function (item) { return (omi_1.h("strong", null, item.id)); },
}, {
title: 'Name',
key: 'name',
@ -2830,7 +2829,7 @@ var Table = /** @class */ (function (_super) {
}
Table.prototype.render = function (props) {
var _this = this;
return omi_1.h("o-table", { ref: function (e) { return _this.table = e; }, checkbox: true, stripe: false, border: true, compact: true, columns: this.columns, dataSource: this.dataSource });
return omi_1.h("o-table", { ref: function (e) { return _this.table = e; }, checkbox: true, stripe: false, border: true, compact: false, height: "200px", sticky: true, columns: this.columns, dataSource: this.dataSource });
};
Table = __decorate([
omi_1.tag('table-demo')
@ -3008,42 +3007,46 @@ var Table = /** @class */ (function (_super) {
return;
if (!props.dataSource)
return;
return (omi_1.h("table", __assign({}, omi_1.extractClass(props, 'o-table', {
return (omi_1.h("div", __assign({ style: {
height: props.height && props.height
} }, omi_1.extractClass(props, 'o-table', {
'o-table-checkbox': props.checkbox,
'o-table-border': props.border,
'o-table-stripe': props.stripe
})),
omi_1.h("thead", null,
omi_1.h("tr", null, props.columns.map(function (column, index) {
omi_1.h("table", __assign({}, omi_1.extractClass(props, 'o-table-table')),
omi_1.h("thead", null,
omi_1.h("tr", null, props.columns.map(function (column, index) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi_1.h("th", __assign({}, obj, { class: omi_1.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a['sticky'] = props.sticky,
_a)) }),
index === 0 && props.checkbox && omi_1.h("o-checkbox", __assign({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, column); } })),
column.title);
}))),
omi_1.h("tbody", { class: "o-table-tbody" }, props.dataSource.map(function (item) { return (omi_1.h("tr", { key: item.id, ref: function (e) { return _this['row' + item.id] = e; }, style: {
background: item.$config && item.$config.bgColor
} }, props.columns.map(function (column, subIndex) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi_1.h("th", __assign({}, obj, { class: omi_1.classNames((_a = {},
return omi_1.h("td", __assign({}, obj, { class: omi_1.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
index === 0 && props.checkbox && omi_1.h("o-checkbox", __assign({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, column); } })),
column.title);
}))),
omi_1.h("tbody", { class: "o-table-tbody" }, props.dataSource.map(function (item) { return (omi_1.h("tr", { key: item.id, ref: function (e) { return _this['row' + item.id] = e; }, style: {
background: item.$config && item.$config.bgColor
} }, props.columns.map(function (column, subIndex) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi_1.h("td", __assign({}, obj, { class: omi_1.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
subIndex === 0 && props.checkbox && omi_1.h("o-checkbox", { checked: item.checked, onChange: function (_) { return _this._changeHandlerTd(_, item); } }),
column.render ? column.render(item) : item[column.key]);
}))); }))));
subIndex === 0 && props.checkbox && omi_1.h("o-checkbox", { checked: item.checked, onChange: function (_) { return _this._changeHandlerTd(_, item); } }),
column.render ? column.render(item) : item[column.key]);
}))); })))));
};
Table.css = css;
Table.defaultProps = {
@ -3052,7 +3055,8 @@ var Table = /** @class */ (function (_super) {
checkbox: false,
border: false,
stripe: false,
compact: false
compact: false,
sticky: false
};
Table.propTypes = {
dataSource: Object,
@ -3060,7 +3064,9 @@ var Table = /** @class */ (function (_super) {
checkbox: Boolean,
border: Boolean,
stripe: Boolean,
compact: Boolean
compact: Boolean,
height: String,
sticky: Boolean
};
Table = __decorate([
omi_1.tag('o-table')

2
components/table/src/demo.js.map
View File

File diff suppressed because one or more lines are too long

2
components/table/src/demo.tsx
View File

@ -95,6 +95,8 @@ export default class Table extends WeElement {
stripe={false}
border={true}
compact={false}
height="200px"
sticky={true}
columns={this.columns} dataSource={this.dataSource}></o-table>
}
}

9
components/table/src/index.css
View File

@ -2,11 +2,13 @@
display: block; }
.o-table {
overflow: auto; }
.o-table-table {
background: white;
margin: auto;
padding: 5px;
width: 100%;
animation: float 5s infinite;
border-spacing: 0;
border-collapse: collapse;
color: #606266;
@ -27,6 +29,11 @@ th {
font-weight: 500;
background: #fafafa; }
th.sticky {
position: sticky;
top: -1px;
z-index: 1000; }
.o-table-border td,
.o-table-border th {
border-right: 1px solid #ebeef5; }

5
components/table/src/index.d.ts vendored
View File

@ -7,6 +7,8 @@ interface Props {
border: boolean;
stripe: boolean;
compact: boolean;
height: string;
sticky: boolean;
}
export default class Table extends WeElement<Props> {
static css: any;
@ -17,6 +19,7 @@ export default class Table extends WeElement<Props> {
border: boolean;
stripe: boolean;
compact: boolean;
sticky: boolean;
};
static propTypes: {
dataSource: ObjectConstructor;
@ -25,6 +28,8 @@ export default class Table extends WeElement<Props> {
border: BooleanConstructor;
stripe: BooleanConstructor;
compact: BooleanConstructor;
height: StringConstructor;
sticky: BooleanConstructor;
};
deleteRow: (item: any) => void;
deleteRowById(id: any): Promise<void>;

68
components/table/src/index.esm.js
View File

@ -1,5 +1,5 @@
/**
* @omiu/table v0.0.7 http://omijs.org
* @omiu/table v0.0.8 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
@ -380,11 +380,13 @@ var css = `:host {
display: block; }
.o-table {
overflow: auto; }
.o-table-table {
background: white;
margin: auto;
padding: 5px;
width: 100%;
animation: float 5s infinite;
border-spacing: 0;
border-collapse: collapse;
color: #606266;
@ -405,6 +407,11 @@ th {
font-weight: 500;
background: #fafafa; }
th.sticky {
position: sticky;
top: -1px;
z-index: 1000; }
.o-table-border td,
.o-table-border th {
border-right: 1px solid #ebeef5; }
@ -545,42 +552,46 @@ var Table = /** @class */ (function (_super) {
return;
if (!props.dataSource)
return;
return (h("table", __assign$1({}, extractClass(props, 'o-table', {
return (h("div", __assign$1({ style: {
height: props.height && props.height
} }, extractClass(props, 'o-table', {
'o-table-checkbox': props.checkbox,
'o-table-border': props.border,
'o-table-stripe': props.stripe
})),
h("thead", null,
h("tr", null, props.columns.map(function (column, index) {
h("table", __assign$1({}, extractClass(props, 'o-table-table')),
h("thead", null,
h("tr", null, props.columns.map(function (column, index) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return h("th", __assign$1({}, obj, { class: classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a['sticky'] = props.sticky,
_a)) }),
index === 0 && props.checkbox && h("o-checkbox", __assign$1({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, column); } })),
column.title);
}))),
h("tbody", { class: "o-table-tbody" }, props.dataSource.map(function (item) { return (h("tr", { key: item.id, ref: function (e) { return _this['row' + item.id] = e; }, style: {
background: item.$config && item.$config.bgColor
} }, props.columns.map(function (column, subIndex) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return h("th", __assign$1({}, obj, { class: classNames((_a = {},
return h("td", __assign$1({}, obj, { class: classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
index === 0 && props.checkbox && h("o-checkbox", __assign$1({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, column); } })),
column.title);
}))),
h("tbody", { class: "o-table-tbody" }, props.dataSource.map(function (item) { return (h("tr", { key: item.id, ref: function (e) { return _this['row' + item.id] = e; }, style: {
background: item.$config && item.$config.bgColor
} }, props.columns.map(function (column, subIndex) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return h("td", __assign$1({}, obj, { class: classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
subIndex === 0 && props.checkbox && h("o-checkbox", { checked: item.checked, onChange: function (_) { return _this._changeHandlerTd(_, item); } }),
column.render ? column.render(item) : item[column.key]);
}))); }))));
subIndex === 0 && props.checkbox && h("o-checkbox", { checked: item.checked, onChange: function (_) { return _this._changeHandlerTd(_, item); } }),
column.render ? column.render(item) : item[column.key]);
}))); })))));
};
Table.css = css;
Table.defaultProps = {
@ -589,7 +600,8 @@ var Table = /** @class */ (function (_super) {
checkbox: false,
border: false,
stripe: false,
compact: false
compact: false,
sticky: false
};
Table.propTypes = {
dataSource: Object,
@ -597,7 +609,9 @@ var Table = /** @class */ (function (_super) {
checkbox: Boolean,
border: Boolean,
stripe: Boolean,
compact: Boolean
compact: Boolean,
height: String,
sticky: Boolean
};
Table = __decorate$1([
tag('o-table')

2
components/table/src/index.esm.js.map
View File

File diff suppressed because one or more lines are too long

61
components/table/src/index.js
View File

@ -1,5 +1,5 @@
/**
* @omiu/table v0.0.7 http://omijs.org
* @omiu/table v0.0.8 http://omijs.org
* Front End Cross-Frameworks Framework.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omi
@ -378,7 +378,7 @@
"use strict";
var css = ":host {\n display: block; }\n\n.o-table {\n background: white;\n margin: auto;\n padding: 5px;\n width: 100%;\n animation: float 5s infinite;\n border-spacing: 0;\n border-collapse: collapse;\n color: #606266;\n font-weight: 400; }\n\n.o-table-checkbox th:first-child,\n.o-table-checkbox td:first-child {\n padding: 2px 10px 2px; }\n\nth {\n border-bottom: 1px solid #E0E0E0;\n text-align: left;\n vertical-align: middle;\n padding: 10px 10px 10px;\n color: rgba(0, 0, 0, 0.54);\n font-size: 0.75rem;\n line-height: 1.3125rem;\n font-weight: 500;\n background: #fafafa; }\n\n.o-table-border td,\n.o-table-border th {\n border-right: 1px solid #ebeef5; }\n\n.o-table-border td:first-child,\n.o-table-border th:first-child {\n border-left: 1px solid #ebeef5; }\n\n.o-table-border th {\n border-top: 1px solid #ebeef5; }\n\ntr {\n border-bottom: 1px solid #E0E0E0; }\n\ntr:hover td {\n background: #f5f5f5; }\n\ntd {\n text-align: left;\n vertical-align: middle;\n font-size: 0.875rem;\n padding: 10px 10px 10px; }\n\ntd.compact,\nth.compact {\n padding: 4px 10px 4px; }\n\na {\n text-decoration: none; }\n\n.o-table-align-left {\n text-align: left; }\n\n.o-table-align-center {\n text-align: center; }\n\no-checkbox {\n height: 20px;\n vertical-align: middle; }\n\n.o-table-align-right {\n text-align: right; }\n\na,\na:link,\na:visited,\na:active {\n text-decoration: none;\n color: inherit; }\n\na:hover {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\no-checkbox {\n margin-right: 5px; }\n\n.o-table-stripe tr:nth-of-type(odd) {\n background: white; }\n\n.o-table-stripe tr:nth-of-type(even) {\n background: #fafafa; }\n\n.slide-fade-enter-active {\n transition: all .3s ease; }\n\n.slide-fade-leave-active {\n transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); }\n\n.slide-fade-enter,\n.slide-fade-leave-to {\n transform: translateX(-40px);\n opacity: 0; }\n";
var css = ":host {\n display: block; }\n\n.o-table {\n overflow: auto; }\n\n.o-table-table {\n background: white;\n margin: auto;\n padding: 5px;\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n color: #606266;\n font-weight: 400; }\n\n.o-table-checkbox th:first-child,\n.o-table-checkbox td:first-child {\n padding: 2px 10px 2px; }\n\nth {\n border-bottom: 1px solid #E0E0E0;\n text-align: left;\n vertical-align: middle;\n padding: 10px 10px 10px;\n color: rgba(0, 0, 0, 0.54);\n font-size: 0.75rem;\n line-height: 1.3125rem;\n font-weight: 500;\n background: #fafafa; }\n\nth.sticky {\n position: sticky;\n top: -1px;\n z-index: 1000; }\n\n.o-table-border td,\n.o-table-border th {\n border-right: 1px solid #ebeef5; }\n\n.o-table-border td:first-child,\n.o-table-border th:first-child {\n border-left: 1px solid #ebeef5; }\n\n.o-table-border th {\n border-top: 1px solid #ebeef5; }\n\ntr {\n border-bottom: 1px solid #E0E0E0; }\n\ntr:hover td {\n background: #f5f5f5; }\n\ntd {\n text-align: left;\n vertical-align: middle;\n font-size: 0.875rem;\n padding: 10px 10px 10px; }\n\ntd.compact,\nth.compact {\n padding: 4px 10px 4px; }\n\na {\n text-decoration: none; }\n\n.o-table-align-left {\n text-align: left; }\n\n.o-table-align-center {\n text-align: center; }\n\no-checkbox {\n height: 20px;\n vertical-align: middle; }\n\n.o-table-align-right {\n text-align: right; }\n\na,\na:link,\na:visited,\na:active {\n text-decoration: none;\n color: inherit; }\n\na:hover {\n color: #07c160;\n color: var(--o-primary, #07c160); }\n\no-checkbox {\n margin-right: 5px; }\n\n.o-table-stripe tr:nth-of-type(odd) {\n background: white; }\n\n.o-table-stripe tr:nth-of-type(even) {\n background: #fafafa; }\n\n.slide-fade-enter-active {\n transition: all .3s ease; }\n\n.slide-fade-leave-active {\n transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); }\n\n.slide-fade-enter,\n.slide-fade-leave-to {\n transform: translateX(-40px);\n opacity: 0; }\n";
var Table = /** @class */ (function (_super) {
__extends$1(Table, _super);
@ -444,42 +444,46 @@ var css = ":host {\n display: block; }\n\n.o-table {\n background: white;\n m
return;
if (!props.dataSource)
return;
return (omi.h("table", __assign$1({}, omi.extractClass(props, 'o-table', {
return (omi.h("div", __assign$1({ style: {
height: props.height && props.height
} }, omi.extractClass(props, 'o-table', {
'o-table-checkbox': props.checkbox,
'o-table-border': props.border,
'o-table-stripe': props.stripe
})),
omi.h("thead", null,
omi.h("tr", null, props.columns.map(function (column, index) {
omi.h("table", __assign$1({}, omi.extractClass(props, 'o-table-table')),
omi.h("thead", null,
omi.h("tr", null, props.columns.map(function (column, index) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi.h("th", __assign$1({}, obj, { class: omi.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a['sticky'] = props.sticky,
_a)) }),
index === 0 && props.checkbox && omi.h("o-checkbox", __assign$1({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, column); } })),
column.title);
}))),
omi.h("tbody", { class: "o-table-tbody" }, props.dataSource.map(function (item) { return (omi.h("tr", { key: item.id, ref: function (e) { return _this['row' + item.id] = e; }, style: {
background: item.$config && item.$config.bgColor
} }, props.columns.map(function (column, subIndex) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi.h("th", __assign$1({}, obj, { class: omi.classNames((_a = {},
return omi.h("td", __assign$1({}, obj, { class: omi.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
index === 0 && props.checkbox && omi.h("o-checkbox", __assign$1({}, _this._getCheckedState(), { onChange: function (_) { return _this._changeHandlerTh(_, column); } })),
column.title);
}))),
omi.h("tbody", { class: "o-table-tbody" }, props.dataSource.map(function (item) { return (omi.h("tr", { key: item.id, ref: function (e) { return _this['row' + item.id] = e; }, style: {
background: item.$config && item.$config.bgColor
} }, props.columns.map(function (column, subIndex) {
var _a;
var obj = {};
var width = column.width;
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width };
}
return omi.h("td", __assign$1({}, obj, { class: omi.classNames((_a = {},
_a["o-table-align-" + column.align] = column.align,
_a['compact'] = props.compact,
_a)) }),
subIndex === 0 && props.checkbox && omi.h("o-checkbox", { checked: item.checked, onChange: function (_) { return _this._changeHandlerTd(_, item); } }),
column.render ? column.render(item) : item[column.key]);
}))); }))));
subIndex === 0 && props.checkbox && omi.h("o-checkbox", { checked: item.checked, onChange: function (_) { return _this._changeHandlerTd(_, item); } }),
column.render ? column.render(item) : item[column.key]);
}))); })))));
};
Table.css = css;
Table.defaultProps = {
@ -488,7 +492,8 @@ var css = ":host {\n display: block; }\n\n.o-table {\n background: white;\n m
checkbox: false,
border: false,
stripe: false,
compact: false
compact: false,
sticky: false
};
Table.propTypes = {
dataSource: Object,
@ -496,7 +501,9 @@ var css = ":host {\n display: block; }\n\n.o-table {\n background: white;\n m
checkbox: Boolean,
border: Boolean,
stripe: Boolean,
compact: Boolean
compact: Boolean,
height: String,
sticky: Boolean
};
Table = __decorate$1([
omi.tag('o-table')

2
components/table/src/index.js.map
View File

File diff suppressed because one or more lines are too long

31
components/table/src/index.scss
View File

@ -4,12 +4,15 @@
display: block;
}
.o-table {
.o-table{
overflow: auto;
}
.o-table-table {
background: white;
margin: auto;
padding: 5px;
width: 100%;
animation: float 5s infinite;
border-spacing: 0;
border-collapse: collapse;
color: #606266;
@ -22,15 +25,21 @@
}
th {
border-bottom: 1px solid #E0E0E0;
text-align: left;
vertical-align: middle;
padding: 10px 10px 10px;
color: rgba(0, 0, 0, 0.54);
font-size: 0.75rem;
line-height: 1.3125rem;
font-weight: 500;
background: #fafafa;
border-bottom: 1px solid #E0E0E0;
text-align: left;
vertical-align: middle;
padding: 10px 10px 10px;
color: rgba(0, 0, 0, 0.54);
font-size: 0.75rem;
line-height: 1.3125rem;
font-weight: 500;
background: #fafafa;
}
th.sticky{
position: sticky;
top: -1px;
z-index: 1000;
}
.o-table-border td,

70
components/table/src/index.tsx
View File

@ -10,7 +10,9 @@ interface Props {
checkbox: boolean,
border: boolean,
stripe: boolean,
compact: boolean
compact: boolean,
height: string,
sticky: boolean
}
@tag('o-table')
@ -23,7 +25,8 @@ export default class Table extends WeElement<Props> {
checkbox: false,
border: false,
stripe: false,
compact: false
compact: false,
sticky: false
}
static propTypes = {
@ -32,7 +35,9 @@ export default class Table extends WeElement<Props> {
checkbox: Boolean,
border: Boolean,
stripe: Boolean,
compact: Boolean
compact: Boolean,
height: String,
sticky: Boolean
}
deleteRow = (item) => {
@ -85,46 +90,51 @@ export default class Table extends WeElement<Props> {
if (!props.columns) return
if (!props.dataSource) return
return (
<table {...extractClass(props, 'o-table', {
<div style={{
height: props.height && props.height
}} {...extractClass(props, 'o-table', {
'o-table-checkbox': props.checkbox,
'o-table-border': props.border,
'o-table-stripe': props.stripe
})}>
<thead>
<tr>
{props.columns.map((column, index) => {
const obj: any = {}
const { width } = column
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width }
}
return <th {...obj} class={classNames({
[`o-table-align-${column.align}`]: column.align,
'compact': props.compact,
})}>{index === 0 && props.checkbox && <o-checkbox {...this._getCheckedState()} onChange={_ => this._changeHandlerTh(_, column)} />}{column.title}</th>
})}
</tr>
</thead>
<tbody class="o-table-tbody">
{props.dataSource.map(item => (
<tr key={item.id} ref={e => this['row' + item.id] = e} style={{
background: item.$config && item.$config.bgColor
}}>
{props.columns.map((column, subIndex) => {
<table {...extractClass(props, 'o-table-table')}>
<thead>
<tr>
{props.columns.map((column, index) => {
const obj: any = {}
const { width } = column
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width }
}
return <td {...obj} class={classNames({
return <th {...obj} class={classNames({
[`o-table-align-${column.align}`]: column.align,
'compact': props.compact,
})}>{subIndex === 0 && props.checkbox && <o-checkbox checked={item.checked} onChange={_ => this._changeHandlerTd(_, item)} />}{column.render ? column.render(item) : item[column.key]}</td>
'sticky': props.sticky
})}>{index === 0 && props.checkbox && <o-checkbox {...this._getCheckedState()} onChange={_ => this._changeHandlerTh(_, column)} />}{column.title}</th>
})}
</tr>
))}
</tbody>
</table>
</thead>
<tbody class="o-table-tbody">
{props.dataSource.map(item => (
<tr key={item.id} ref={e => this['row' + item.id] = e} style={{
background: item.$config && item.$config.bgColor
}}>
{props.columns.map((column, subIndex) => {
const obj: any = {}
const { width } = column
if (width !== undefined) {
obj.style = { width: typeof width === 'number' ? width + 'px' : width }
}
return <td {...obj} class={classNames({
[`o-table-align-${column.align}`]: column.align,
'compact': props.compact,
})}>{subIndex === 0 && props.checkbox && <o-checkbox checked={item.checked} onChange={_ => this._changeHandlerTd(_, item)} />}{column.render ? column.render(item) : item[column.key]}</td>
})}
</tr>
))}
</tbody>
</table>
</div>
)
}
}

2
packages/admin/package.json
View File

@ -29,7 +29,7 @@
"@omiu/radio": "^0.0.6",
"@omiu/select": "^0.0.7",
"@omiu/switch": "^0.0.2",
"@omiu/table": "^0.0.7",
"@omiu/table": "^0.0.8",
"@omiu/tabs": "^0.0.18",
"@omiu/toast": "^0.0.8",
"@omiu/tooltip": "0.0.1",