@trove-ui/react
Version:
A React component library for T Design UI
88 lines (87 loc) • 4.76 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_classnames__ from "classnames";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
const index_module = {
"t-table": "t-table-dGBXkd",
tTable: "t-table-dGBXkd",
"t-table__thead": "t-table__thead-DZtX27",
tTableThead: "t-table__thead-DZtX27",
"t-table__tbody": "t-table__tbody-TZgfdD",
tTableTbody: "t-table__tbody-TZgfdD",
"t-table__tr": "t-table__tr-xWmfI2",
tTableTr: "t-table__tr-xWmfI2",
"t-table__wrapper": "t-table__wrapper-Eo_I8g",
tTableWrapper: "t-table__wrapper-Eo_I8g",
border: "border-qY2U4k",
"t-table__td": "t-table__td-yyDi3V",
tTableTd: "t-table__td-yyDi3V",
"t-table__th": "t-table__th-Laydwu",
tTableTh: "t-table__th-Laydwu"
};
const num_to_px = (value)=>{
if ('number' == typeof value) return `${value}px`;
return value;
};
const Table = ({ data, headers, rowIndex, style = {}, rowStyle = {}, className = '', bodyStyle = {}, headerStyle = {}, wrapperStyle = {}, rowClassName = '', bodyClassName = '', headerClassName = '', wrapperClassName = '', border = true, ...props })=>{
const gridTemplateColumns = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>headers.reduce((header, nextHeader)=>header + `minmax(0, ${num_to_px(nextHeader.width) ?? 'auto'}) `, ''), [
headers
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
...props,
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module["t-table"], {
[index_module.border]: border
}, className),
style: {
...style
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module["t-table__wrapper"], wrapperClassName),
style: {
display: 'grid',
height: '100%',
gridTemplateColumns,
...wrapperStyle
},
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module["t-table__thead"], headerClassName),
style: {
...headerStyle
},
children: headers.map(({ align, fieldProp, fieldName })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])('flex align-center', index_module["t-table__th"], {
[index_module.border]: border
}),
style: {
textAlign: align
},
children: fieldName
}, fieldProp))
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module["t-table__tbody"], bodyClassName),
style: {
...bodyStyle
},
children: data.map((record, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module["t-table__tr"], rowClassName),
style: {
...rowStyle
},
children: headers.map(({ align, fieldProp, render = (text)=>text }, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module["t-table__td"], {
[index_module.border]: border
}),
style: {
textAlign: align
},
children: render(record[fieldProp], record, index)
}, index))
}, rowIndex ? `${record[rowIndex]}` : index))
})
]
})
});
};
const components_Table = Table;
export { components_Table as default };