jattac.libs.web.responsive-table 0.0.15 → 0.0.17
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.
- package/dist/Data/IResponsiveTableColumnDefinition.d.ts +5 -1
- package/dist/UI/ResponsiveTable.d.ts +7 -2
- package/dist/index.js +63 -19
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Data/IResponsiveTableColumnDefinition.tsx +5 -1
- package/src/Styles/ResponsiveTable.module.css +10 -6
- package/src/UI/ResponsiveTable.tsx +102 -31
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
export default interface IResponsiveTableColumnDefinition<TData> {
|
|
3
3
|
displayLabel: ReactNode;
|
|
4
|
-
dataKey?: keyof TData;
|
|
5
4
|
cellRenderer: (data: TData) => ReactNode;
|
|
5
|
+
interactivity?: {
|
|
6
|
+
id: string;
|
|
7
|
+
onHeaderClick?: (id: string) => void;
|
|
8
|
+
className?: string;
|
|
9
|
+
};
|
|
6
10
|
}
|
|
@@ -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,11 @@ declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
|
|
|
20
20
|
componentWillUnmount(): void;
|
|
21
21
|
handleResize: () => void;
|
|
22
22
|
private getColumnDefinition;
|
|
23
|
-
|
|
23
|
+
private getRawColumnDefinition;
|
|
24
|
+
private onHeaderClickCallback;
|
|
25
|
+
private getClickableHeaderClassName;
|
|
26
|
+
private get mobileView();
|
|
27
|
+
private get largeScreenView();
|
|
28
|
+
render(): React.ReactNode;
|
|
24
29
|
}
|
|
25
30
|
export default ResponsiveTable;
|
package/dist/index.js
CHANGED
|
@@ -29,8 +29,8 @@ 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-
|
|
33
|
-
var styles = {"card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","
|
|
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_clickableHeader__xHQhF {\n cursor: pointer;\n color: #007bff;\n}\n\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\n text-decoration: underline;\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
|
+
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","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq"};
|
|
34
34
|
styleInject(css_248z);
|
|
35
35
|
|
|
36
36
|
// Class component
|
|
@@ -81,29 +81,73 @@ class ResponsiveTable extends React.Component {
|
|
|
81
81
|
}
|
|
82
82
|
return columnDefinition instanceof Function ? columnDefinition(this.data[0], rowIndex) : columnDefinition;
|
|
83
83
|
}
|
|
84
|
+
getRawColumnDefinition(columnDefinition) {
|
|
85
|
+
let rawColumnDefinition = {};
|
|
86
|
+
if (columnDefinition instanceof Function) {
|
|
87
|
+
rawColumnDefinition = columnDefinition(this.data[0], 0);
|
|
88
|
+
}
|
|
89
|
+
else {
|
|
90
|
+
rawColumnDefinition = columnDefinition;
|
|
91
|
+
}
|
|
92
|
+
return rawColumnDefinition;
|
|
93
|
+
}
|
|
94
|
+
onHeaderClickCallback(columnDefinition) {
|
|
95
|
+
const rawColumnDefinition = this.getRawColumnDefinition(columnDefinition);
|
|
96
|
+
if (rawColumnDefinition.interactivity && rawColumnDefinition.interactivity.onHeaderClick) {
|
|
97
|
+
return rawColumnDefinition.interactivity.onHeaderClick;
|
|
98
|
+
}
|
|
99
|
+
else {
|
|
100
|
+
return undefined;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
getClickableHeaderClassName(onHeaderClickCallback, colDef) {
|
|
104
|
+
const rawColumnDefinition = this.getRawColumnDefinition(colDef);
|
|
105
|
+
const clickableHeaderClassName = onHeaderClickCallback
|
|
106
|
+
? rawColumnDefinition.interactivity.className || styles.clickableHeader
|
|
107
|
+
: '';
|
|
108
|
+
return clickableHeaderClassName;
|
|
109
|
+
}
|
|
110
|
+
get mobileView() {
|
|
111
|
+
return (React.createElement("div", null, this.data.map((row, rowIndex) => (React.createElement("div", { key: rowIndex, className: styles['card'] },
|
|
112
|
+
React.createElement("div", { className: styles['card-header'] }, " "),
|
|
113
|
+
React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
114
|
+
const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
|
|
115
|
+
const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
|
|
116
|
+
const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
|
|
117
|
+
return (React.createElement("div", { key: colIndex },
|
|
118
|
+
React.createElement("p", null,
|
|
119
|
+
React.createElement("span", { className: `font-bold ${clickableHeaderClassName}`, onClick: onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity.id) : undefined },
|
|
120
|
+
colDef.displayLabel,
|
|
121
|
+
":"),
|
|
122
|
+
' ',
|
|
123
|
+
colDef.cellRenderer(row))));
|
|
124
|
+
})))))));
|
|
125
|
+
}
|
|
126
|
+
get largeScreenView() {
|
|
127
|
+
const useFixedHeaders = this.props.maxHeight ? true : false;
|
|
128
|
+
const fixedHeadersStyle = useFixedHeaders
|
|
129
|
+
? { maxHeight: this.props.maxHeight, overflowY: 'auto' }
|
|
130
|
+
: {};
|
|
131
|
+
return (React.createElement("div", { style: fixedHeadersStyle },
|
|
132
|
+
React.createElement("table", { className: styles['responsiveTable'] },
|
|
133
|
+
React.createElement("thead", null,
|
|
134
|
+
React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
135
|
+
const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
|
|
136
|
+
const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, columnDefinition);
|
|
137
|
+
return (React.createElement("th", { key: colIndex, className: `${clickableHeaderClassName}`, onClick: onHeaderClickCallback
|
|
138
|
+
? () => onHeaderClickCallback(this.getColumnDefinition(columnDefinition, 0).interactivity.id)
|
|
139
|
+
: undefined }, this.getColumnDefinition(columnDefinition, 0).displayLabel));
|
|
140
|
+
}))),
|
|
141
|
+
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)))))))))));
|
|
142
|
+
}
|
|
84
143
|
render() {
|
|
85
144
|
if (!this.hasData) {
|
|
86
145
|
return this.noDataComponent;
|
|
87
146
|
}
|
|
88
147
|
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
|
-
})))))));
|
|
148
|
+
return this.mobileView;
|
|
101
149
|
}
|
|
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)))))))))));
|
|
150
|
+
return this.largeScreenView;
|
|
107
151
|
}
|
|
108
152
|
}
|
|
109
153
|
|
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
|
@@ -2,6 +2,10 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
|
|
3
3
|
export default interface IResponsiveTableColumnDefinition<TData> {
|
|
4
4
|
displayLabel: ReactNode;
|
|
5
|
-
dataKey?: keyof TData;
|
|
6
5
|
cellRenderer: (data: TData) => ReactNode;
|
|
6
|
+
interactivity?: {
|
|
7
|
+
id: string;
|
|
8
|
+
onHeaderClick?: (id: string) => void;
|
|
9
|
+
className?: string;
|
|
10
|
+
};
|
|
7
11
|
}
|
|
@@ -16,11 +16,6 @@
|
|
|
16
16
|
padding: 10px;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.tableContainer {
|
|
20
|
-
max-height: 300px;
|
|
21
|
-
overflow-y: auto;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
19
|
.responsiveTable {
|
|
25
20
|
width: 100%;
|
|
26
21
|
border-collapse: collapse;
|
|
@@ -36,7 +31,7 @@
|
|
|
36
31
|
.responsiveTable th,
|
|
37
32
|
.responsiveTable td {
|
|
38
33
|
padding: 12px;
|
|
39
|
-
border: 1px solid #dddddd;
|
|
34
|
+
border-bottom: 1px solid #dddddd;
|
|
40
35
|
text-align: left;
|
|
41
36
|
}
|
|
42
37
|
|
|
@@ -50,6 +45,15 @@
|
|
|
50
45
|
background-color: #d9edf7;
|
|
51
46
|
}
|
|
52
47
|
|
|
48
|
+
.clickableHeader {
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
color: #007bff;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.clickableHeader:hover {
|
|
54
|
+
text-decoration: underline;
|
|
55
|
+
}
|
|
56
|
+
|
|
53
57
|
.noDataWrapper {
|
|
54
58
|
color: #ca3333;
|
|
55
59
|
display: flex;
|
|
@@ -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,42 +84,102 @@ 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
|
-
|
|
87
|
+
private getRawColumnDefinition(columnDefinition: ColumnDefinition<TData>): IResponsiveTableColumnDefinition<TData> {
|
|
88
|
+
let rawColumnDefinition: IResponsiveTableColumnDefinition<TData> = {} as IResponsiveTableColumnDefinition<TData>;
|
|
89
|
+
if (columnDefinition instanceof Function) {
|
|
90
|
+
rawColumnDefinition = columnDefinition(this.data[0], 0);
|
|
91
|
+
} else {
|
|
92
|
+
rawColumnDefinition = columnDefinition as IResponsiveTableColumnDefinition<TData>;
|
|
90
93
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
return (
|
|
101
|
-
<div key={colIndex}>
|
|
102
|
-
<p>
|
|
103
|
-
<span className="font-bold">{colDef.displayLabel}:</span> {colDef.cellRenderer(row)}
|
|
104
|
-
</p>
|
|
105
|
-
</div>
|
|
106
|
-
);
|
|
107
|
-
})}
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
))}
|
|
111
|
-
</div>
|
|
112
|
-
);
|
|
94
|
+
return rawColumnDefinition;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
private onHeaderClickCallback(columnDefinition: ColumnDefinition<TData>): ((id: string) => void) | undefined {
|
|
98
|
+
const rawColumnDefinition = this.getRawColumnDefinition(columnDefinition);
|
|
99
|
+
if (rawColumnDefinition.interactivity && rawColumnDefinition.interactivity.onHeaderClick) {
|
|
100
|
+
return rawColumnDefinition.interactivity.onHeaderClick;
|
|
101
|
+
} else {
|
|
102
|
+
return undefined;
|
|
113
103
|
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
private getClickableHeaderClassName(
|
|
107
|
+
onHeaderClickCallback: ((id: string) => void) | undefined,
|
|
108
|
+
colDef: ColumnDefinition<TData>,
|
|
109
|
+
): string {
|
|
110
|
+
const rawColumnDefinition = this.getRawColumnDefinition(colDef);
|
|
111
|
+
const clickableHeaderClassName = onHeaderClickCallback
|
|
112
|
+
? rawColumnDefinition.interactivity!.className || styles.clickableHeader
|
|
113
|
+
: '';
|
|
114
|
+
return clickableHeaderClassName;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
private get mobileView(): ReactNode {
|
|
118
|
+
return (
|
|
119
|
+
<div>
|
|
120
|
+
{this.data.map((row, rowIndex) => (
|
|
121
|
+
<div key={rowIndex} className={styles['card']}>
|
|
122
|
+
<div className={styles['card-header']}> </div>
|
|
123
|
+
<div className={styles['card-body']}>
|
|
124
|
+
{this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
125
|
+
const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
|
|
126
|
+
const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
|
|
127
|
+
const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
|
|
128
|
+
return (
|
|
129
|
+
<div key={colIndex}>
|
|
130
|
+
<p>
|
|
131
|
+
<span
|
|
132
|
+
className={`font-bold ${clickableHeaderClassName}`}
|
|
133
|
+
onClick={
|
|
134
|
+
onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity!.id) : undefined
|
|
135
|
+
}
|
|
136
|
+
>
|
|
137
|
+
{colDef.displayLabel}:
|
|
138
|
+
</span>{' '}
|
|
139
|
+
{colDef.cellRenderer(row)}
|
|
140
|
+
</p>
|
|
141
|
+
</div>
|
|
142
|
+
);
|
|
143
|
+
})}
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
))}
|
|
147
|
+
</div>
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
private get largeScreenView(): ReactNode {
|
|
152
|
+
const useFixedHeaders = this.props.maxHeight ? true : false;
|
|
153
|
+
|
|
154
|
+
const fixedHeadersStyle = useFixedHeaders
|
|
155
|
+
? ({ maxHeight: this.props.maxHeight, overflowY: 'auto' } as CSSProperties)
|
|
156
|
+
: {};
|
|
114
157
|
|
|
115
158
|
return (
|
|
116
|
-
<div
|
|
159
|
+
<div style={fixedHeadersStyle}>
|
|
117
160
|
<table className={styles['responsiveTable']}>
|
|
118
161
|
<thead>
|
|
119
162
|
<tr>
|
|
120
|
-
{this.props.columnDefinitions.map((columnDefinition, colIndex) =>
|
|
121
|
-
|
|
122
|
-
|
|
163
|
+
{this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
164
|
+
const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
|
|
165
|
+
const clickableHeaderClassName = this.getClickableHeaderClassName(
|
|
166
|
+
onHeaderClickCallback,
|
|
167
|
+
columnDefinition,
|
|
168
|
+
);
|
|
169
|
+
return (
|
|
170
|
+
<th
|
|
171
|
+
key={colIndex}
|
|
172
|
+
className={`${clickableHeaderClassName}`}
|
|
173
|
+
onClick={
|
|
174
|
+
onHeaderClickCallback
|
|
175
|
+
? () => onHeaderClickCallback(this.getColumnDefinition(columnDefinition, 0).interactivity!.id)
|
|
176
|
+
: undefined
|
|
177
|
+
}
|
|
178
|
+
>
|
|
179
|
+
{this.getColumnDefinition(columnDefinition, 0).displayLabel}
|
|
180
|
+
</th>
|
|
181
|
+
);
|
|
182
|
+
})}
|
|
123
183
|
</tr>
|
|
124
184
|
</thead>
|
|
125
185
|
<tbody>
|
|
@@ -135,6 +195,17 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
|
|
|
135
195
|
</div>
|
|
136
196
|
);
|
|
137
197
|
}
|
|
198
|
+
|
|
199
|
+
render() {
|
|
200
|
+
if (!this.hasData) {
|
|
201
|
+
return this.noDataComponent;
|
|
202
|
+
}
|
|
203
|
+
if (this.state.isMobile) {
|
|
204
|
+
return this.mobileView;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
return this.largeScreenView;
|
|
208
|
+
}
|
|
138
209
|
}
|
|
139
210
|
|
|
140
211
|
export default ResponsiveTable;
|