@zym-com/table-universal
v0.0.2
Published
多功能表格
Downloads
3
Readme
Install
npm install @zym-com/table-universalor
yarn add @zym-com/table-universalBasic Usage
import TableUniversal from "@zym-com/table-universal";
import "@zym-com/table-universal/dist/style.css";
function App() {
const options = {
"configuration": {
"tableSize": {
"w": 100,
"h": 100
},
"tableBorderStyle": "solid",
"tableBorderWidth": 2,
"tableBorderColor": "rgba(24, 144, 255,1)",
"headerDividerBorderStyle": "solid",
"headerDividerBorderWidth": 2,
"headerDividerBorderColor": "rgba(24, 144, 255,1)",
"horizontalDividerBorderStyle": "solid",
"horizontalDividerBorderWidth": 2,
"horizontalDividerBorderColor": "rgba(24, 144, 255,1)",
"verticalDividerBorderStyle": "solid",
"verticalDividerBorderWidth": 2,
"verticalDividerBorderColor": "rgba(24, 144, 255,1)",
"tableTheadShow": true,
"tableTheadHeight": 30,
"renderingType": "automatic",
"sortType": "none",
"tableTheadGlobeBgType": "image",
"tableTheadGlobeSolidColor": "rgba(0,186,255,1)",
"tableTheadGlobeAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"tableTheadGlobeImage": "header.png",
"tableTheadGlobeBGSize": {
"w": 100,
"h": 100
},
"tableTheadGlobeBGPosition": {
"x": 50,
"y": 50
},
"tableTheadGlobeBorderStyle": "solid",
"tableTheadGlobeBorderWidth": 2,
"tableTheadGlobeBorderColor": "rgba(24, 144, 255,1)",
"tableRowMinHeight": 30,
"makeUpShow": false,
"rowSortType": "none",
"sortFields": "",
"rowBgColorSelect": "BgImage",
"oddRowBgsolidBgColor": "rgba(0,59,81,1)",
"evenRowBgsolidBgColor": "rgba(10,39,50,1)",
"rowBgsolidBgColorHover": "rgba(0,241,255,0.8)",
"oddRrowBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"evenRrowBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"rowBgAnamorphismHover": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"oddRowBgImage": "column.png",
"evenRowBgImage": "column.png",
"rowBgImageHover": "column-hover.png",
"rowBgBGSize": {
"rowBgBGSizeW": 100,
"rowBgBGSizeH": 80
},
"rowBgBGPosition": {
"rowBgBGPositionW": 50,
"rowBgBGPositionH": 50
},
"rowGloberBorderStyle": "solid",
"rowGloberBorderWidth": 2,
"rowGloberBorderColor": "rgba(24, 144, 255,1)",
"pageIndex": 1,
"pageSize": 5,
"pagingShow": false,
"pagingAutoPlay": false,
"pagingAutoPlayTime": 4000,
"pagingSize": {
"w": 100,
"h": "40px"
},
"pagingFlexDirection": "row",
"pagingAlignItems": "center",
"pagingJustifyContent": "flex-end",
"firstLastPagesSize": {
"x": 30,
"y": 30
},
"firstLastBgColorSelect": "solidColor",
"firstLastBgColor": "rgba(24, 144, 255,0.15)",
"firstLastBgGradient": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"firstLastBgImage": "",
"firstLastBgImageSize": "cover",
"firstLastBorderStyle": "solid",
"firstLastBorderWidth": 1,
"firstLastBorderColor": "rgba(255, 255, 255,1)",
"firstLastBgborderRadius": 10,
"firstDomType": "text",
"firstMargin": {
"t": 0,
"r": 5,
"b": 0,
"l": 0
},
"firstDomText": "<<",
"firstTextStyle": {
"color": "rgba(255,255,255,1)",
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"firstDomImage": "",
"firstImageSize": {
"x": 0,
"y": 0
},
"firstObjectFit": "contain",
"firstBorderRadius": "5px",
"lastDomType": "text",
"lastMargin": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"lastDomText": ">>",
"lastTextStyle": {
"color": "rgba(255,255,255,1)",
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"lastDomImage": "",
"lastImageSize": {
"x": 0,
"y": 0
},
"lastObjectFit": "contain",
"lastBorderRadius": "5px",
"upDownPagesSize": {
"x": 30,
"y": 30
},
"upDownBgColorSelect": "solidColor",
"upDownBgColor": "rgba(24, 144, 255,0.15)",
"upDownBgGradient": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"upDownBgImage": "",
"upDownBgImageSize": "cover",
"upDownBorderStyle": "solid",
"upDownBorderWidth": 1,
"upDownBorderColor": "rgba(255, 255, 255,1)",
"upDownBgborderRadius": 10,
"upPageDomType": "text",
"upMargin": {
"t": 0,
"r": 5,
"b": 0,
"l": 0
},
"upPageDomText": "<",
"upPageTextStyle": {
"color": "rgba(255,255,255,1)",
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"upPageDomImage": "",
"upPageImageSize": {
"x": 0,
"y": 0
},
"upPageObjectFit": "contain",
"upPageBorderRadius": "5px",
"downPageDomType": "text",
"downMargin": {
"t": 0,
"r": 5,
"b": 0,
"l": 0
},
"downPageDomText": ">",
"downPageTextStyle": {
"color": "rgba(255,255,255,1)",
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"downPageDomImage": "",
"downPageImageSize": {
"x": 0,
"y": 0
},
"downPageObjectFit": "contain",
"downPageBorderRadius": "5px",
"numberPagesSize": {
"x": 30,
"y": 30
},
"numberPagesPadding": {
"t": 0,
"r": 0,
"b": 0,
"l": 0
},
"numberPagesMargin": {
"t": 0,
"r": 5,
"b": 0,
"l": 0
},
"siblingsSize": 1,
"numberPagesEllipsis": true,
"numberPagesEllipsisText": "· · ·",
"boundarySize": 2,
"numberPagesBgColorSelect": "solidColor",
"numberPagesBgColor": "rgba(24, 144, 255,0.15)",
"numberPagesBgGradient": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"numberPagesBgImage": "",
"numberPagesBgImageSize": "cover",
"numberPagesBorderStyle": "solid",
"numberPagesBorderWidth": 1,
"numberPagesBorderColor": "rgba(255, 255, 255,1)",
"numberPagesBgborderRadius": 10,
"numberPagesTextStyle": {
"color": "rgba(255,255,255,1)",
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"numberPagesActiveBgColorSelect": "solidColor",
"numberPagesActiveBgColor": "rgba(24, 144, 255,0.15)",
"numberPagesActiveBgGradient": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"numberPagesActiveBgImage": "",
"numberPagesActiveBgImageSize": "cover",
"numberPagesActiveBorderStyle": "solid",
"numberPagesActiveBorderWidth": 1,
"numberPagesActiveBorderColor": "rgba(24,144,255,1)",
"numberPagesActiveBgborderRadius": 10,
"numberPagesActiveTextStyle": {
"color": "rgba(24,144,255,1)",
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"tableTheadSeries": [
{
"tableTheadMapping": {
"field": "value",
"value": "销售额"
},
"tableTheadColumnShow": false,
"tableTheadIndex": 0,
"tableTheadSize": {
"x": "100",
"y": "100"
},
"tableTheadTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"tableTheadTextAlignment": "horizontal",
"tableTheadTextOrientation": "horizontal",
"tableTheadBeyond": "default",
"tableTheadBeyondWrap": "default",
"tableTheadFlexDirection": "row",
"tableTheadAlignItems": "center",
"tableTheadJustifyContent": "center",
"tableTheadBgType": "image",
"tableTheadSolidColor": "rgba(0,186,255,1)",
"tableTheadAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"tableTheadBorderRadius": "0",
"tableTheadImage": "",
"tableTheadBGSize": {
"w": 100,
"h": 100
},
"tableTheadBGPosition": {
"x": 50,
"y": 50
},
"tableTheadBorderWidth": 0,
"tableTheadBorderType": "solid",
"tableTheadBorderColor": "rgba(0,59,81,1)",
"tableTheadBorderBorderRadius": "0",
"tableTheadPrefixStyleSelect": "image",
"tableTheadPrefixMargin": 0,
"tableTheadPrefixImage": "",
"tableTheadPrefixWH": {
"w": "10px",
"h": "10px"
},
"tableTheadPrefixborderRadius": 0,
"tableTheadPrefixText": "",
"tableTheadPrefixTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"tableTheadSuffixMargin": 0,
"tableTheadSuffixImage": "",
"tableTheadSuffixWH": {
"w": "10px",
"h": "10px"
},
"tableTheadSuffixborderRadius": 0,
"tableTheadSuffixText": "",
"tableTheadSuffixTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"tableTheadBgStyle": true,
"tableTheadBorderStyle": true,
"tableTheadPrefixStyleChild": false,
"tableTheadSuffixStyleChild": false
}
],
"tableRowSeries": [
{
"tableRowFildType": "value",
"tableRowAccurateMatching": true,
"tableRowFildValue": {
"field": "",
"value": ""
},
"tableRowNumericField": "value",
"tableRowValueRange": {
"min": "0",
"max": "100"
},
"tableRowBgColorSelect": "solidBgColor",
"tableRowBgColor": "rgba(24, 144, 255,0.15)",
"tableRowBgGradient": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"tableRowBgImage": "",
"tableRowBgImageSize": "cover",
"tableRowBgOpacity": 1,
"tableRowBorderStyle": "solid",
"tableRowBorderWidth": 2,
"tableRowBorderColor": "rgba(24, 144, 255,1)",
"tableRowBgStyleChild": false,
"tableRowBorderStyleChild": false
}
],
"tableColumnSeries": [
{
"tableColumnField": "value",
"tableColumnWidth": 0,
"tableColumnDataSeries": [
{
"tableColumnFildType": "global",
"tableColumnAccurateMatching": true,
"tableColumnFildValue": {
"field": "",
"value": ""
},
"tableColumnNumberField": "value",
"tableColumnValueRange": {
"min": "0",
"max": "100"
},
"tableColumnDataSize": {
"x": 100,
"y": 90
},
"tableColumnBgColorSelect": "solidColor",
"tableColumnBgColor": "rgba(24, 144, 255,0.15)",
"tableColumnBgGradient": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"tableColumnBgImage": "",
"tableColumnBgImageSize": "cover",
"tableColumnBorderStyle": "solid",
"tableColumnBorderWidth": 2,
"tableColumnBorderColor": "rgba(24, 144, 255,1)",
"tableColumnBgborderRadius": 0,
"tableColumnContentSeries": [
{
"tableColumnDomType": "text",
"tableColumnDomSize": {
"x": 0,
"y": 0
},
"tableColumnDomItemPosition": {
"x": "50%",
"y": "50%"
},
"tableColumnDomText": "",
"tableColumnTextColorSelect": "solidColor",
"tableColumnTextSolidColor": "rgba(255,255,255,1)",
"tableColumnTextGradientColor": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"tableColumnTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 12,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 12,
"fontStyle": "normal"
},
"tableColumnLevelalignment": "center",
"tableColumnTextOrientation": "horizontal",
"tableColumnBeyond": "default",
"tableColumnBeyondWrap": "default",
"tableColumnTransparency": 1,
"tableColumnShadow": [
"rgba(255,255,255,1)",
0,
0,
0
],
"tableColumnDomImage": "",
"tableColumnObjectFit": "contain",
"tableColumnBorderRadius": "5px",
"tableColumnDomVideo": {
"url": ""
},
"tableColumnObjectFitVideo": "contain",
"tableColumnOpacityVideo": 1,
"tableColumnAutoPlayVideo": true,
"tableColumnControlsVideo": true,
"tableColumnLoopVideo": false,
"tableColumnMutedVideo": false,
"tableColumnTextShadow": false
}
],
"tableColumnBgStyleChild": false,
"tableColumnBorderStyleChild": false
}
]
}
],
"tableBorderStyleChild": false,
"headerDividerBorderStyleChild": false,
"horizontalDividerBorderStyleChild": false,
"verticalDividerBorderStyleChild": false,
"tableTheadGlobeBgStyle": true,
"tableTheadGlobeBorderStyleChild": false,
"rowBgStyle": true,
"rowGloberBorderStyleChild": false,
"firstLastPages": true,
"upDownPages": true,
"numberPages": true,
"firstLastBgStyleChild": false,
"firstLastBorderStyleChild": true,
"firstStyleChild": true,
"lastStyleChild": true,
"upDownBgStyleChild": false,
"upDownBorderStyleChild": true,
"upPageStyleChild": true,
"downPageStyleChild": true,
"numberPagesBgStyleChild": false,
"numberPagesBorderStyleChild": true,
"numberPagesTextStyleChild": true,
"numberPagesActiveBgStyleChild": false,
"numberPagesActiveBorderStyleChild": true,
"numberPagesActiveTextStyleChild": true
},
"base": {
"width": 400,
"height": 240
},
"dataSource": [
{
"firstName": "sail",
"lastName": "crow",
"age": 3,
"value": 53,
"progress": 24,
"status": "complicated"
},
{
"firstName": "harmony",
"lastName": "policy",
"age": 11,
"value": 54,
"progress": 79,
"status": "complicated"
},
{
"firstName": "cough",
"lastName": "bear",
"age": 8,
"value": 48,
"progress": 92,
"status": "single"
},
{
"firstName": "brass",
"lastName": "engine",
"age": 0,
"value": 66,
"progress": 74,
"status": "single"
},
{
"firstName": "poison",
"lastName": "assistant",
"age": 6,
"value": 74,
"progress": 47,
"status": "complicated"
},
{
"firstName": "frogs",
"lastName": "variety",
"age": 9,
"value": 23,
"progress": 29,
"status": "single"
},
{
"firstName": "snake",
"lastName": "mall",
"age": 27,
"value": 80,
"progress": 22,
"status": "single"
},
{
"firstName": "doll",
"lastName": "bait",
"age": 23,
"value": 7,
"progress": 0,
"status": "relationship"
},
{
"firstName": "downtown",
"lastName": "church",
"age": 28,
"value": 0,
"progress": 29,
"status": "complicated"
},
{
"firstName": "band",
"lastName": "church",
"age": 5,
"value": 10,
"progress": 95,
"status": "relationship"
},
{
"firstName": "grandfather",
"lastName": "mass",
"age": 20,
"value": 8,
"progress": 2,
"status": "complicated"
},
{
"firstName": "cactus",
"lastName": "education",
"age": 17,
"value": 84,
"progress": 78,
"status": "single"
},
{
"firstName": "personality",
"lastName": "cheek",
"age": 11,
"value": 40,
"progress": 83,
"status": "relationship"
},
{
"firstName": "sack",
"lastName": "writing",
"age": 2,
"value": 93,
"progress": 8,
"status": "complicated"
},
{
"firstName": "camera",
"lastName": "tradition",
"age": 29,
"value": 89,
"progress": 22,
"status": "complicated"
},
{
"firstName": "equipment",
"lastName": "hydrant",
"age": 7,
"value": 54,
"progress": 52,
"status": "complicated"
},
{
"firstName": "experience",
"lastName": "sweater",
"age": 15,
"value": 19,
"progress": 16,
"status": "relationship"
},
{
"firstName": "indication",
"lastName": "newspaper",
"age": 9,
"value": 75,
"progress": 92,
"status": "complicated"
},
{
"firstName": "independence",
"lastName": "front",
"age": 24,
"value": 17,
"progress": 44,
"status": "single"
},
{
"firstName": "office",
"lastName": "election",
"age": 27,
"value": 17,
"progress": 68,
"status": "single"
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<TableUniversal {...options} />
</>
);
}