ant-responsive-table
Version:
responsive ant design table
105 lines • 5.53 kB
JavaScript
"use strict";
/**
* This component will render classic ant table with no changes
* Unless the props 'ViewPortWidth' is less than prop 'MobileBreakPoint'
* then it will render custom html for responsive design
*/
Object.defineProperty(exports, "__esModule", { value: true });
const card_1 = require("antd/lib/card");
const divider_1 = require("antd/lib/divider");
const pagination_1 = require("antd/lib/pagination");
const spin_1 = require("antd/lib/spin");
const table_1 = require("antd/lib/table");
const React = require("react");
const typestyle_1 = require("typestyle");
if (typeof window !== "undefined" && typeof document !== "undefined") {
const head = document.head || document.getElementsByTagName("head")[0];
const styleTag = document.createElement("style");
head.appendChild(styleTag);
styleTag.type = "text/css";
styleTag.appendChild(document.createTextNode(typestyle_1.getStyles()));
}
const ResponsiveTableStyle = {
showOnBreakPoint: (breakPoint, display = "block") => typestyle_1.style({
display: "none"
}, typestyle_1.media({ maxWidth: breakPoint }, {
display
})),
hideOnBreakPoint: (breakPoint, display = "block") => typestyle_1.style({
display
}, typestyle_1.media({ maxWidth: breakPoint }, {
display: "none"
})),
customRow: typestyle_1.style({}),
spinContainer: typestyle_1.style({
display: "block",
position: "absolute",
height: "100%",
width: "100%",
zIndex: 4,
maxHeight: 360
}),
spin: typestyle_1.style({
position: "absolute",
top: "50%",
left: "50%",
margin: "-10px"
}),
spinBlur: typestyle_1.style({
pointerEvents: "none",
userSelect: "none",
overflow: "hidden",
opacity: 0.5,
"-webkit-filter": "blur(0.5px)",
filter: "blur(0.5px)",
transition: "opacity 0.3s",
zoom: 1
})
};
class ResponsiveTable extends React.Component {
constructor(props) {
super(props);
}
render() {
const desktopTableProps = this.props.antTableProps;
// @ts-ignore
desktopTableProps.columns = desktopTableProps.columns.filter((col) => col.showOnDesktop);
return (React.createElement("div", null,
React.createElement("div", { className: ResponsiveTableStyle.hideOnBreakPoint(this.props.mobileBreakPoint) },
React.createElement(table_1.default, Object.assign({}, desktopTableProps))),
React.createElement("div", { className: ResponsiveTableStyle.showOnBreakPoint(this.props.mobileBreakPoint) },
React.createElement("div", { className: this.props.antTableProps.loading
? ResponsiveTableStyle.spinBlur
: "" },
this.props.antTableProps.loading ? (React.createElement("div", { className: ResponsiveTableStyle.spinContainer },
React.createElement(spin_1.default, { className: ResponsiveTableStyle.spin }))) : null,
!this.props.antTableProps.dataSource ? (React.createElement(table_1.default, null)) : (this.props.antTableProps.dataSource.map((rowData, index) => {
const onRow = this.props.antTableProps.onRow
? Object.assign({}, this.props.antTableProps.onRow(rowData, index)) : undefined;
return (React.createElement(card_1.default, Object.assign({ key: rowData.key }, this.props.cardProps, onRow), this.props.antTableProps.columns
? this.props.antTableProps.columns.map((colData, index) => {
return colData.showOnResponse ? (React.createElement("div", { key: `${rowData.key}${colData.key}` },
React.createElement("div", { style: { display: "flex" } },
React.createElement("div", { style: {
width: "35%",
paddingRight: 5,
textAlign: "right"
} }, colData.title ? (React.createElement("b", null,
colData.title,
":")) : null),
React.createElement("div", { style: { width: "65%", paddingLeft: 5 } }, colData.key
? colData.render
? colData.render(rowData[colData.key], undefined, 1)
: rowData[colData.key]
: null)),
this.props.antTableProps.columns ? (index + 1 ===
this.props.antTableProps.columns
.length ? null : (React.createElement(divider_1.default, null))) : null)) : null;
})
: null));
})),
this.props.antTableProps.pagination ? (React.createElement(pagination_1.default, Object.assign({}, this.props.antTableProps.pagination))) : null))));
}
}
exports.default = ResponsiveTable;
//# sourceMappingURL=AntResponsiveTable.js.map