jattac.libs.web.responsive-table 0.0.14 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,7 +5,7 @@ interface IProps<TData> {
|
|
|
5
5
|
columnDefinitions: ColumnDefinition<TData>[];
|
|
6
6
|
data: TData[];
|
|
7
7
|
noDataComponent?: ReactNode;
|
|
8
|
-
|
|
8
|
+
maxHeight?: string;
|
|
9
9
|
}
|
|
10
10
|
interface IState {
|
|
11
11
|
isMobile: boolean;
|
|
@@ -20,6 +20,8 @@ declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
|
|
|
20
20
|
componentWillUnmount(): void;
|
|
21
21
|
handleResize: () => void;
|
|
22
22
|
private getColumnDefinition;
|
|
23
|
-
|
|
23
|
+
private get mobileView();
|
|
24
|
+
private get largeScreenView();
|
|
25
|
+
render(): React.ReactNode;
|
|
24
26
|
}
|
|
25
27
|
export default ResponsiveTable;
|
package/dist/index.js
CHANGED
|
@@ -29,7 +29,7 @@ function styleInject(css, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
var css_248z = ".ResponsiveTable-module_card__b-U2v {\n border: 1px solid #ccc;\n margin-bottom: 10px;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n\n.ResponsiveTable-module_card-header__Ttk51 {\n background-color: #f0f0f0;\n padding: 10px;\n font-weight: bold;\n}\n\n.ResponsiveTable-module_card-body__XIy0h {\n padding: 10px;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od {\n width: 100%;\n border-collapse: collapse;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\n background-color: #f2f2f2;\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od th,\n.ResponsiveTable-module_responsiveTable__4y-Od td {\n padding: 12px;\n border: 1px solid #dddddd;\n text-align: left;\n}\n\n/* Alternate row colors */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\n background-color: #f9f9f9;\n}\n\n/* Change background color on hover */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\n background-color: #d9edf7;\n}\n\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\n color: #ca3333;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n gap: 10px;\n}\n\n.ResponsiveTable-module_noData__IpwNq {\n text-align: center;\n font-weight: bold;\n padding: 30px;\n}\n";
|
|
32
|
+
var css_248z = ".ResponsiveTable-module_card__b-U2v {\n border: 1px solid #ccc;\n margin-bottom: 10px;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n\n.ResponsiveTable-module_card-header__Ttk51 {\n background-color: #f0f0f0;\n padding: 10px;\n font-weight: bold;\n}\n\n.ResponsiveTable-module_card-body__XIy0h {\n padding: 10px;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od {\n width: 100%;\n border-collapse: collapse;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\n background-color: #f2f2f2;\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od th,\n.ResponsiveTable-module_responsiveTable__4y-Od td {\n padding: 12px;\n border-bottom: 1px solid #dddddd;\n text-align: left;\n}\n\n/* Alternate row colors */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\n background-color: #f9f9f9;\n}\n\n/* Change background color on hover */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\n background-color: #d9edf7;\n}\n\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\n color: #ca3333;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n gap: 10px;\n}\n\n.ResponsiveTable-module_noData__IpwNq {\n text-align: center;\n font-weight: bold;\n padding: 30px;\n}\n";
|
|
33
33
|
var styles = {"card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq"};
|
|
34
34
|
styleInject(css_248z);
|
|
35
35
|
|
|
@@ -81,29 +81,39 @@ class ResponsiveTable extends React.Component {
|
|
|
81
81
|
}
|
|
82
82
|
return columnDefinition instanceof Function ? columnDefinition(this.data[0], rowIndex) : columnDefinition;
|
|
83
83
|
}
|
|
84
|
+
get mobileView() {
|
|
85
|
+
return (React.createElement("div", null, this.data.map((row, rowIndex) => (React.createElement("div", { key: rowIndex, className: styles['card'] },
|
|
86
|
+
React.createElement("div", { className: styles['card-header'] }, " "),
|
|
87
|
+
React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
88
|
+
const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
|
|
89
|
+
return (React.createElement("div", { key: colIndex },
|
|
90
|
+
React.createElement("p", null,
|
|
91
|
+
React.createElement("span", { className: "font-bold" },
|
|
92
|
+
colDef.displayLabel,
|
|
93
|
+
":"),
|
|
94
|
+
" ",
|
|
95
|
+
colDef.cellRenderer(row))));
|
|
96
|
+
})))))));
|
|
97
|
+
}
|
|
98
|
+
get largeScreenView() {
|
|
99
|
+
const useFixedHeaders = this.props.maxHeight ? true : false;
|
|
100
|
+
const fixedHeadersStyle = useFixedHeaders
|
|
101
|
+
? { maxHeight: this.props.maxHeight, overflowY: 'auto' }
|
|
102
|
+
: {};
|
|
103
|
+
return (React.createElement("div", { style: fixedHeadersStyle },
|
|
104
|
+
React.createElement("table", { className: styles['responsiveTable'] },
|
|
105
|
+
React.createElement("thead", null,
|
|
106
|
+
React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("th", { key: colIndex }, this.getColumnDefinition(columnDefinition, 0).displayLabel))))),
|
|
107
|
+
React.createElement("tbody", null, this.data.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { key: colIndex }, this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)))))))))));
|
|
108
|
+
}
|
|
84
109
|
render() {
|
|
85
110
|
if (!this.hasData) {
|
|
86
111
|
return this.noDataComponent;
|
|
87
112
|
}
|
|
88
113
|
if (this.state.isMobile) {
|
|
89
|
-
return
|
|
90
|
-
React.createElement("div", { className: styles['card-header'] }, " "),
|
|
91
|
-
React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
92
|
-
const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
|
|
93
|
-
return (React.createElement("div", { key: colIndex },
|
|
94
|
-
React.createElement("p", null,
|
|
95
|
-
React.createElement("span", { className: "font-bold" },
|
|
96
|
-
colDef.displayLabel,
|
|
97
|
-
":"),
|
|
98
|
-
" ",
|
|
99
|
-
colDef.cellRenderer(row))));
|
|
100
|
-
})))))));
|
|
114
|
+
return this.mobileView;
|
|
101
115
|
}
|
|
102
|
-
return
|
|
103
|
-
React.createElement("table", { className: styles['responsiveTable'] },
|
|
104
|
-
React.createElement("thead", null,
|
|
105
|
-
React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("th", { key: colIndex }, this.getColumnDefinition(columnDefinition, 0).displayLabel))))),
|
|
106
|
-
React.createElement("tbody", null, this.data.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { key: colIndex }, this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)))))))))));
|
|
116
|
+
return this.largeScreenView;
|
|
107
117
|
}
|
|
108
118
|
}
|
|
109
119
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/UI/ResponsiveTable.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n",null],"names":["Component"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/UI/ResponsiveTable.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n",null],"names":["Component"],"mappings":"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","x_google_ignoreList":[0]}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { Component, ReactNode } from 'react';
|
|
1
|
+
import React, { CSSProperties, Component, ReactNode } from 'react';
|
|
2
2
|
import styles from '../Styles/ResponsiveTable.module.css';
|
|
3
3
|
import IResponsiveTableColumnDefinition from '../Data/IResponsiveTableColumnDefinition';
|
|
4
4
|
|
|
@@ -9,7 +9,7 @@ interface IProps<TData> {
|
|
|
9
9
|
columnDefinitions: ColumnDefinition<TData>[];
|
|
10
10
|
data: TData[];
|
|
11
11
|
noDataComponent?: ReactNode;
|
|
12
|
-
|
|
12
|
+
maxHeight?: string;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
interface IState {
|
|
@@ -84,36 +84,39 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
|
|
|
84
84
|
return columnDefinition instanceof Function ? columnDefinition(this.data[0], rowIndex) : columnDefinition;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
</p>
|
|
105
|
-
</div>
|
|
106
|
-
);
|
|
107
|
-
})}
|
|
108
|
-
</div>
|
|
87
|
+
private get mobileView(): ReactNode {
|
|
88
|
+
return (
|
|
89
|
+
<div>
|
|
90
|
+
{this.data.map((row, rowIndex) => (
|
|
91
|
+
<div key={rowIndex} className={styles['card']}>
|
|
92
|
+
<div className={styles['card-header']}> </div>
|
|
93
|
+
<div className={styles['card-body']}>
|
|
94
|
+
{this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
95
|
+
const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
|
|
96
|
+
return (
|
|
97
|
+
<div key={colIndex}>
|
|
98
|
+
<p>
|
|
99
|
+
<span className="font-bold">{colDef.displayLabel}:</span> {colDef.cellRenderer(row)}
|
|
100
|
+
</p>
|
|
101
|
+
</div>
|
|
102
|
+
);
|
|
103
|
+
})}
|
|
109
104
|
</div>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
105
|
+
</div>
|
|
106
|
+
))}
|
|
107
|
+
</div>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
private get largeScreenView(): ReactNode {
|
|
112
|
+
const useFixedHeaders = this.props.maxHeight ? true : false;
|
|
113
|
+
|
|
114
|
+
const fixedHeadersStyle = useFixedHeaders
|
|
115
|
+
? ({ maxHeight: this.props.maxHeight, overflowY: 'auto' } as CSSProperties)
|
|
116
|
+
: {};
|
|
114
117
|
|
|
115
118
|
return (
|
|
116
|
-
<div>
|
|
119
|
+
<div style={fixedHeadersStyle}>
|
|
117
120
|
<table className={styles['responsiveTable']}>
|
|
118
121
|
<thead>
|
|
119
122
|
<tr>
|
|
@@ -135,6 +138,17 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
|
|
|
135
138
|
</div>
|
|
136
139
|
);
|
|
137
140
|
}
|
|
141
|
+
|
|
142
|
+
render() {
|
|
143
|
+
if (!this.hasData) {
|
|
144
|
+
return this.noDataComponent;
|
|
145
|
+
}
|
|
146
|
+
if (this.state.isMobile) {
|
|
147
|
+
return this.mobileView;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
return this.largeScreenView;
|
|
151
|
+
}
|
|
138
152
|
}
|
|
139
153
|
|
|
140
154
|
export default ResponsiveTable;
|