jattac.libs.web.responsive-table 0.0.16 → 0.0.18
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 +3 -0
- package/dist/index.js +39 -5
- 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 +9 -0
- package/src/UI/ResponsiveTable.tsx +61 -4
|
@@ -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
|
}
|
|
@@ -20,6 +20,9 @@ declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
|
|
|
20
20
|
componentWillUnmount(): void;
|
|
21
21
|
handleResize: () => void;
|
|
22
22
|
private getColumnDefinition;
|
|
23
|
+
private getRawColumnDefinition;
|
|
24
|
+
private onHeaderClickCallback;
|
|
25
|
+
private getClickableHeaderClassName;
|
|
23
26
|
private get mobileView();
|
|
24
27
|
private get largeScreenView();
|
|
25
28
|
render(): React.ReactNode;
|
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-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
|
-
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"};
|
|
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,17 +81,45 @@ 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
|
+
}
|
|
84
110
|
get mobileView() {
|
|
85
111
|
return (React.createElement("div", null, this.data.map((row, rowIndex) => (React.createElement("div", { key: rowIndex, className: styles['card'] },
|
|
86
112
|
React.createElement("div", { className: styles['card-header'] }, " "),
|
|
87
113
|
React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
88
114
|
const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
|
|
115
|
+
const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
|
|
116
|
+
const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
|
|
89
117
|
return (React.createElement("div", { key: colIndex },
|
|
90
118
|
React.createElement("p", null,
|
|
91
|
-
React.createElement("span", { className:
|
|
119
|
+
React.createElement("span", { className: `font-bold ${clickableHeaderClassName}`, onClick: onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity.id) : undefined },
|
|
92
120
|
colDef.displayLabel,
|
|
93
121
|
":"),
|
|
94
|
-
|
|
122
|
+
' ',
|
|
95
123
|
colDef.cellRenderer(row))));
|
|
96
124
|
})))))));
|
|
97
125
|
}
|
|
@@ -103,7 +131,13 @@ class ResponsiveTable extends React.Component {
|
|
|
103
131
|
return (React.createElement("div", { style: fixedHeadersStyle },
|
|
104
132
|
React.createElement("table", { className: styles['responsiveTable'] },
|
|
105
133
|
React.createElement("thead", null,
|
|
106
|
-
React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) =>
|
|
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
|
+
}))),
|
|
107
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)))))))))));
|
|
108
142
|
}
|
|
109
143
|
render() {
|
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
|
}
|
|
@@ -84,6 +84,36 @@ 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
|
+
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>;
|
|
93
|
+
}
|
|
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;
|
|
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
|
+
|
|
87
117
|
private get mobileView(): ReactNode {
|
|
88
118
|
return (
|
|
89
119
|
<div>
|
|
@@ -93,10 +123,20 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
|
|
|
93
123
|
<div className={styles['card-body']}>
|
|
94
124
|
{this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
95
125
|
const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
|
|
126
|
+
const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
|
|
127
|
+
const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
|
|
96
128
|
return (
|
|
97
129
|
<div key={colIndex}>
|
|
98
130
|
<p>
|
|
99
|
-
<span
|
|
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)}
|
|
100
140
|
</p>
|
|
101
141
|
</div>
|
|
102
142
|
);
|
|
@@ -120,9 +160,26 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
|
|
|
120
160
|
<table className={styles['responsiveTable']}>
|
|
121
161
|
<thead>
|
|
122
162
|
<tr>
|
|
123
|
-
{this.props.columnDefinitions.map((columnDefinition, colIndex) =>
|
|
124
|
-
|
|
125
|
-
|
|
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
|
+
})}
|
|
126
183
|
</tr>
|
|
127
184
|
</thead>
|
|
128
185
|
<tbody>
|