ms-react-table 1.0.0
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/README.md +203 -0
- package/dist/index.css +253 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +45 -0
- package/dist/index.d.ts +45 -0
- package/dist/index.js +517 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +480 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +43 -0
package/README.md
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
# `index.ts`
|
|
2
|
+
|
|
3
|
+
This file serves as the entry point for the MsReactTable library. It manages exports, imports styles, and makes the main table component and its types available for external use.
|
|
4
|
+
|
|
5
|
+
## Main Responsibilities
|
|
6
|
+
|
|
7
|
+
- Imports the global table styles.
|
|
8
|
+
- Exports the main component (`MsReactTable`) as the library's default export.
|
|
9
|
+
- Exports TypeScript types for table props and header configuration.
|
|
10
|
+
|
|
11
|
+
### Key Features
|
|
12
|
+
|
|
13
|
+
- **Style Inclusion**: Ensures all consumers get the required CSS by importing the style sheet.
|
|
14
|
+
- **Component Export**: Provides the table component for use in other React projects.
|
|
15
|
+
- **Type Export**: Makes essential TypeScript types available for type checking and IntelliSense.
|
|
16
|
+
|
|
17
|
+
### Code Breakdown
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import './_assets/style.css';
|
|
21
|
+
export { default as MsReactTable } from './MsReactTable';
|
|
22
|
+
export type { MsTablePropsTypes, MsTableHeaderCellTypes } from './types/msTableTypes';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
#### Exports Explained
|
|
26
|
+
|
|
27
|
+
| Export Name | Type | Description |
|
|
28
|
+
|----------------------------|-----------|----------------------------------------------------------|
|
|
29
|
+
| MsReactTable | Component | The primary table UI component for React applications. |
|
|
30
|
+
| MsTablePropsTypes | Type | Table props TypeScript type for prop validation. |
|
|
31
|
+
| MsTableHeaderCellTypes | Type | Header cell definition type for table columns. |
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
# `MsReactTable.tsx`
|
|
36
|
+
|
|
37
|
+
This file defines the main `MsReactTable` React component. It assembles the table's structure, context, and layout, and enables pagination.
|
|
38
|
+
|
|
39
|
+
## Overview
|
|
40
|
+
|
|
41
|
+
- **Component**: `MsReactTable`
|
|
42
|
+
- **Props Type**: `MsTablePropsTypes`
|
|
43
|
+
- **Context**: Uses `TableProvider` for state management and sharing refs.
|
|
44
|
+
- **Composition**: Renders header, body, and (optionally) footer with pagination.
|
|
45
|
+
- **Styling**: Applies a container and table-specific styles.
|
|
46
|
+
|
|
47
|
+
## Component Responsibilities
|
|
48
|
+
|
|
49
|
+
- Receives configuration via props (columns, data, styling, etc).
|
|
50
|
+
- Provides context to subcomponents via `TableProvider`.
|
|
51
|
+
- Manages DOM references for the table, body, and header.
|
|
52
|
+
- Renders header, body, and (optionally) the footer for pagination.
|
|
53
|
+
|
|
54
|
+
### Props
|
|
55
|
+
|
|
56
|
+
The expected props are described by `MsTablePropsTypes`. This can include:
|
|
57
|
+
|
|
58
|
+
- `height`: Table container height.
|
|
59
|
+
- `className`: Custom CSS classes.
|
|
60
|
+
- `style`: Inline styles for the table.
|
|
61
|
+
- `showPagination` (optional): Toggle footer visibility.
|
|
62
|
+
- `ref`: Passed down to the root table element.
|
|
63
|
+
|
|
64
|
+
### Code Structure
|
|
65
|
+
|
|
66
|
+
```jsx
|
|
67
|
+
import React from 'react'
|
|
68
|
+
import { MsTablePropsTypes } from './types/msTableTypes'
|
|
69
|
+
import { TableProvider } from './contextAPI/MsTableProvider'
|
|
70
|
+
import MsTableHeader from './components/Header/msTableHeader'
|
|
71
|
+
import MsTableBody from './components/Body/msTableBody'
|
|
72
|
+
import MsTableFooter from './components/Footer/msTableFooter'
|
|
73
|
+
import './_assets/style.css'
|
|
74
|
+
|
|
75
|
+
const MsReactTable: React.FC<MsTablePropsTypes>=(props) => {
|
|
76
|
+
const { showPagination = true } = props
|
|
77
|
+
const containerRef = React.useRef<HTMLDivElement>(null!)
|
|
78
|
+
const tbodyRef = React.useRef<HTMLTableSectionElement>(null!)
|
|
79
|
+
const theadRef = React.useRef<HTMLTableSectionElement>(null!)
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<TableProvider {...props} tbodyRef={tbodyRef} theadRef={theadRef}>
|
|
83
|
+
<div className='table-container' ref={containerRef} style={{height:props.height || '200px'}}>
|
|
84
|
+
<table
|
|
85
|
+
ref={props.ref}
|
|
86
|
+
className={`ms-react-table ${props.className}`}
|
|
87
|
+
border={0}
|
|
88
|
+
cellPadding={0}
|
|
89
|
+
cellSpacing={0}
|
|
90
|
+
style={{ width: '100%', ...props.style }}
|
|
91
|
+
>
|
|
92
|
+
<MsTableHeader ref={theadRef} />
|
|
93
|
+
<MsTableBody ref={tbodyRef} />
|
|
94
|
+
</table>
|
|
95
|
+
</div>
|
|
96
|
+
{showPagination && <MsTableFooter />}
|
|
97
|
+
</TableProvider>
|
|
98
|
+
)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
MsReactTable.displayName = 'MsReactTable'
|
|
102
|
+
export default MsReactTable
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
## Component Layout
|
|
108
|
+
|
|
109
|
+
The component composes the following:
|
|
110
|
+
|
|
111
|
+
| Section | Component | Purpose |
|
|
112
|
+
|----------------|-------------------|-----------------------------------|
|
|
113
|
+
| Table Header | MsTableHeader | Renders table column headers. |
|
|
114
|
+
| Table Body | MsTableBody | Renders the visible row data. |
|
|
115
|
+
| Table Footer | MsTableFooter | Handles pagination UI (optional). |
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## Component Data Flow
|
|
120
|
+
|
|
121
|
+
```mermaid
|
|
122
|
+
flowchart TD
|
|
123
|
+
A[MsReactTable] -->|Context| B[TableProvider]
|
|
124
|
+
B --> C[MsTableHeader]
|
|
125
|
+
B --> D[MsTableBody]
|
|
126
|
+
B --> E[MsTableFooter]
|
|
127
|
+
A --> F[table-container (div)]
|
|
128
|
+
F --> G[table]
|
|
129
|
+
G --> C
|
|
130
|
+
G --> D
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
- **MsReactTable** initializes and passes props and refs to **TableProvider**.
|
|
134
|
+
- The provider gives context (data, config, refs) to all child components.
|
|
135
|
+
- **MsTableHeader**, **MsTableBody**, and **MsTableFooter** consume the context.
|
|
136
|
+
- The root `<div>` ensures the table is scrollable if height constraints exist.
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## Usage Example
|
|
141
|
+
|
|
142
|
+
```js
|
|
143
|
+
import { MsReactTable } from 'ms-react-table';
|
|
144
|
+
|
|
145
|
+
const columns = [
|
|
146
|
+
{ key: 'id', label: 'ID' },
|
|
147
|
+
{ key: 'name', label: 'Name' }
|
|
148
|
+
];
|
|
149
|
+
|
|
150
|
+
const data = [
|
|
151
|
+
{ id: 1, name: 'Alice' },
|
|
152
|
+
{ id: 2, name: 'Bob' }
|
|
153
|
+
];
|
|
154
|
+
|
|
155
|
+
<MsReactTable
|
|
156
|
+
columns={columns}
|
|
157
|
+
data={data}
|
|
158
|
+
height="300px"
|
|
159
|
+
showPagination={true}
|
|
160
|
+
/>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## Return Types
|
|
166
|
+
|
|
167
|
+
- **Component**: Returns a composite React element (`JSX.Element`) representing a styled, interactive table.
|
|
168
|
+
- **Refs**: Exposes underlying DOM elements via React refs for advanced use (scrolling, focusing, etc).
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
## Exceptions and Error Handling
|
|
173
|
+
|
|
174
|
+
- **Refs**: The use of non-null assertion (`null!`) when creating refs assumes the elements will always exist. If a ref is passed down or used improperly, this may lead to runtime errors.
|
|
175
|
+
- **Props**: The component expects props to match `MsTablePropsTypes`. Passing incompatible props can cause runtime or type errors.
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
## Best Practices
|
|
180
|
+
|
|
181
|
+
```card
|
|
182
|
+
{
|
|
183
|
+
"title": "Type Safety and Refs",
|
|
184
|
+
"content": "Always use the exported types for props and headers. Handle refs with care to avoid null dereferencing."
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
## Summary Table
|
|
191
|
+
|
|
192
|
+
| Feature | Description |
|
|
193
|
+
|-------------------|------------------------------------------------------|
|
|
194
|
+
| Context API | Shares table state and refs with all child elements. |
|
|
195
|
+
| Pagination | Toggleable via `showPagination` prop. |
|
|
196
|
+
| Customization | Supports custom class names and inline styles. |
|
|
197
|
+
| Extensibility | Designed for component composition and context use. |
|
|
198
|
+
|
|
199
|
+
---
|
|
200
|
+
|
|
201
|
+
## Library Architecture
|
|
202
|
+
|
|
203
|
+
This modular structure ensures the table can be easily integrated, extended, or customized within any React project. By separating header, body, and footer, and leveraging context, the library is both flexible and robust.
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
/* src/_assets/style.css */
|
|
2
|
+
.text-center {
|
|
3
|
+
text-align: center;
|
|
4
|
+
}
|
|
5
|
+
.text-left {
|
|
6
|
+
text-align: left;
|
|
7
|
+
}
|
|
8
|
+
.text-right {
|
|
9
|
+
text-align: right;
|
|
10
|
+
}
|
|
11
|
+
.cursor-pointer {
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
}
|
|
14
|
+
.cursor-disabled {
|
|
15
|
+
cursor: not-allowed !important;
|
|
16
|
+
opacity: 0.6;
|
|
17
|
+
}
|
|
18
|
+
.table-wrapper {
|
|
19
|
+
display: grid;
|
|
20
|
+
margin: 15px;
|
|
21
|
+
font-family: "Nunito Sans";
|
|
22
|
+
position: relative;
|
|
23
|
+
}
|
|
24
|
+
.table-container {
|
|
25
|
+
width: 100%;
|
|
26
|
+
position: relative;
|
|
27
|
+
overflow: auto;
|
|
28
|
+
max-height: 600px;
|
|
29
|
+
}
|
|
30
|
+
.ms-auto-width .ms-react-table {
|
|
31
|
+
table-layout: auto !important;
|
|
32
|
+
}
|
|
33
|
+
.ms-react-table {
|
|
34
|
+
table-layout: fixed;
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 100%;
|
|
37
|
+
}
|
|
38
|
+
.ms-react-table > thead {
|
|
39
|
+
position: sticky;
|
|
40
|
+
top: 0;
|
|
41
|
+
background-color: #ddd;
|
|
42
|
+
}
|
|
43
|
+
.ms-react-table .ms-table-header-cell {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex: 0 0 1;
|
|
46
|
+
justify-content: space-between;
|
|
47
|
+
align-items: center;
|
|
48
|
+
user-select: none;
|
|
49
|
+
}
|
|
50
|
+
.ms-react-table th {
|
|
51
|
+
padding: 10px;
|
|
52
|
+
position: relative;
|
|
53
|
+
}
|
|
54
|
+
.ms-react-table th .ms-table-header-action {
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
}
|
|
58
|
+
.ms-react-table th .ms-table-header-action svg {
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
}
|
|
61
|
+
.ms-react-table td {
|
|
62
|
+
padding: 5px 10px;
|
|
63
|
+
border-top: 1px solid #e9e9e9;
|
|
64
|
+
border-bottom: 1px solid #e9e9e9;
|
|
65
|
+
width: auto;
|
|
66
|
+
}
|
|
67
|
+
.ms-react-table tbody > tr:hover {
|
|
68
|
+
background-color: #f4f4f4;
|
|
69
|
+
}
|
|
70
|
+
.ms-table-header-cell-title {
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 5px;
|
|
75
|
+
}
|
|
76
|
+
.ms-table-header-cell-title svg {
|
|
77
|
+
width: 14px;
|
|
78
|
+
height: 14px;
|
|
79
|
+
}
|
|
80
|
+
.ms-table-header-cell-title,
|
|
81
|
+
.ms-react-table td {
|
|
82
|
+
overflow: hidden;
|
|
83
|
+
text-overflow: ellipsis;
|
|
84
|
+
white-space: nowrap;
|
|
85
|
+
}
|
|
86
|
+
.ms-table-column-resizer::after {
|
|
87
|
+
content: "";
|
|
88
|
+
position: absolute;
|
|
89
|
+
right: 0;
|
|
90
|
+
top: 50%;
|
|
91
|
+
width: 1.5px;
|
|
92
|
+
height: 1.5rem;
|
|
93
|
+
cursor: col-resize;
|
|
94
|
+
user-select: none;
|
|
95
|
+
background-color: #2e2e2e;
|
|
96
|
+
transform: translateY(-50%);
|
|
97
|
+
}
|
|
98
|
+
.ms-react-table th:last-child .ms-table-column-resizer {
|
|
99
|
+
position: absolute;
|
|
100
|
+
width: 10px;
|
|
101
|
+
right: 5px !important;
|
|
102
|
+
top: 0;
|
|
103
|
+
height: 100%;
|
|
104
|
+
}
|
|
105
|
+
.ms-react-table th:last-child .ms-table-header-cell {
|
|
106
|
+
margin-right: 10px;
|
|
107
|
+
}
|
|
108
|
+
.table-footer {
|
|
109
|
+
padding: 5px 10px;
|
|
110
|
+
display: flex;
|
|
111
|
+
justify-content: space-between;
|
|
112
|
+
align-items: center;
|
|
113
|
+
background-color: #ddd;
|
|
114
|
+
}
|
|
115
|
+
.table-footer label {
|
|
116
|
+
font-size: 14px;
|
|
117
|
+
}
|
|
118
|
+
.pagination-controls {
|
|
119
|
+
display: flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
gap: 10px;
|
|
122
|
+
}
|
|
123
|
+
.pagination-buttons {
|
|
124
|
+
display: flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
line-height: 1;
|
|
127
|
+
gap: 5px;
|
|
128
|
+
}
|
|
129
|
+
.pagination-buttons span {
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
font-size: 14px;
|
|
134
|
+
cursor: pointer;
|
|
135
|
+
}
|
|
136
|
+
.pagination-buttons span svg {
|
|
137
|
+
width: 16px;
|
|
138
|
+
color: #2e2e2e;
|
|
139
|
+
}
|
|
140
|
+
.pagination-info select {
|
|
141
|
+
margin-left: 5px;
|
|
142
|
+
padding: 2px 5px;
|
|
143
|
+
border: 1px solid #2e2e2e;
|
|
144
|
+
border-radius: 4px;
|
|
145
|
+
background-color: white;
|
|
146
|
+
}
|
|
147
|
+
.pagination-info select option {
|
|
148
|
+
border: none;
|
|
149
|
+
outline: none;
|
|
150
|
+
}
|
|
151
|
+
.header-menu {
|
|
152
|
+
position: absolute;
|
|
153
|
+
top: 0;
|
|
154
|
+
}
|
|
155
|
+
.header-menu ul {
|
|
156
|
+
background-color: #fff;
|
|
157
|
+
box-shadow: 0px 0px 10px 2px #aaa;
|
|
158
|
+
list-style: none;
|
|
159
|
+
padding: 0;
|
|
160
|
+
border-radius: 2px;
|
|
161
|
+
margin: 0;
|
|
162
|
+
width: 200px;
|
|
163
|
+
}
|
|
164
|
+
.header-menu ul li {
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
position: relative;
|
|
167
|
+
font-size: 14px;
|
|
168
|
+
padding: 10px;
|
|
169
|
+
display: flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
justify-content: left;
|
|
172
|
+
gap: 5px;
|
|
173
|
+
border-bottom: 2px groove #f3f3f3;
|
|
174
|
+
}
|
|
175
|
+
.header-menu ul li:last-child {
|
|
176
|
+
border-bottom: none;
|
|
177
|
+
}
|
|
178
|
+
.header-menu ul li:hover {
|
|
179
|
+
background-color: #f2f2f2;
|
|
180
|
+
}
|
|
181
|
+
.header-menu ul li:hover ul {
|
|
182
|
+
transform: scaleX(1) !important;
|
|
183
|
+
}
|
|
184
|
+
.header-menu ul > li > span {
|
|
185
|
+
line-height: .5;
|
|
186
|
+
}
|
|
187
|
+
.header-menu ul > li > span > svg {
|
|
188
|
+
width: 16px;
|
|
189
|
+
height: 16px;
|
|
190
|
+
}
|
|
191
|
+
.header-menu ul li > ul {
|
|
192
|
+
position: absolute;
|
|
193
|
+
top: 0;
|
|
194
|
+
right: -6.25rem;
|
|
195
|
+
transform: scaleX(0);
|
|
196
|
+
transition: all 0.25s ease-in-out;
|
|
197
|
+
transform-origin: left;
|
|
198
|
+
}
|
|
199
|
+
.header-menu ul li > ul li span {
|
|
200
|
+
width: 16px;
|
|
201
|
+
}
|
|
202
|
+
.header-menu .column-list {
|
|
203
|
+
background-color: #f2f2f2;
|
|
204
|
+
min-width: 160px;
|
|
205
|
+
padding: 5px;
|
|
206
|
+
box-shadow: 0px 0px 10px 2px #aaa;
|
|
207
|
+
}
|
|
208
|
+
.header-menu .column-list .search {
|
|
209
|
+
margin-bottom: 10px;
|
|
210
|
+
}
|
|
211
|
+
input.search-input {
|
|
212
|
+
width: 100%;
|
|
213
|
+
display: inline-block;
|
|
214
|
+
border: 1px solid rgb(77, 77, 77);
|
|
215
|
+
border-radius: 4px;
|
|
216
|
+
box-sizing: border-box;
|
|
217
|
+
padding: 5px;
|
|
218
|
+
}
|
|
219
|
+
.search-input:active {
|
|
220
|
+
}
|
|
221
|
+
.header-menu .column-list .list {
|
|
222
|
+
border-top: 1px solid #ccc;
|
|
223
|
+
max-height: 300px;
|
|
224
|
+
overflow-y: auto;
|
|
225
|
+
}
|
|
226
|
+
.ms-checkbox-input {
|
|
227
|
+
height: 14px;
|
|
228
|
+
width: 14px;
|
|
229
|
+
}
|
|
230
|
+
.header-menu .column-list .list .item {
|
|
231
|
+
padding: 5px;
|
|
232
|
+
display: flex;
|
|
233
|
+
gap: 10px;
|
|
234
|
+
align-items: center;
|
|
235
|
+
}
|
|
236
|
+
.overlay-message {
|
|
237
|
+
position: absolute;
|
|
238
|
+
width: 100%;
|
|
239
|
+
left: 0;
|
|
240
|
+
top: 0;
|
|
241
|
+
display: flex;
|
|
242
|
+
align-items: center;
|
|
243
|
+
justify-content: center;
|
|
244
|
+
}
|
|
245
|
+
.left-pinned {
|
|
246
|
+
position: sticky !important;
|
|
247
|
+
left: 0;
|
|
248
|
+
}
|
|
249
|
+
.right-pinned {
|
|
250
|
+
position: sticky !important;
|
|
251
|
+
right: 0;
|
|
252
|
+
}
|
|
253
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/_assets/style.css"],"sourcesContent":[".text-center {\r\n text-align: center;\r\n}\r\n\r\n.text-left {\r\n text-align: left;\r\n}\r\n\r\n.text-right {\r\n text-align: right;\r\n}\r\n\r\n.cursor-pointer {\r\n cursor: pointer;\r\n}\r\n\r\n.cursor-disabled {\r\n cursor: not-allowed !important;\r\n opacity: 0.6;\r\n}\r\n\r\n.table-wrapper {\r\n display: grid;\r\n margin: 15px;\r\n font-family: 'Nunito Sans';\r\n position: relative;\r\n}\r\n\r\n.table-container {\r\n width: 100%;\r\n position: relative;\r\n overflow: auto;\r\n max-height: 600px;\r\n}\r\n\r\n.ms-auto-width .ms-react-table {\r\n table-layout: auto !important;\r\n}\r\n\r\n.ms-react-table {\r\n table-layout: fixed;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.ms-react-table>thead {\r\n position: sticky;\r\n top: 0;\r\n background-color: #ddd;\r\n}\r\n\r\n.ms-react-table .ms-table-header-cell {\r\n display: flex;\r\n flex: 0 0 1;\r\n justify-content: space-between;\r\n align-items: center;\r\n user-select: none;\r\n}\r\n\r\n.ms-react-table th {\r\n padding: 10px;\r\n position: relative;\r\n}\r\n\r\n.ms-react-table th .ms-table-header-action {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.ms-react-table th .ms-table-header-action svg {\r\n cursor: pointer;\r\n}\r\n\r\n.ms-react-table td {\r\n padding: 5px 10px;\r\n border-top: 1px solid #e9e9e9;\r\n border-bottom: 1px solid #e9e9e9;\r\n width: auto;\r\n}\r\n.ms-react-table tbody > tr:hover{\r\n background-color: #f4f4f4;\r\n}\r\n\r\n.ms-table-header-cell-title {\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.ms-table-header-cell-title svg {\r\n width: 14px;\r\n height: 14px;\r\n}\r\n\r\n.ms-table-header-cell-title,\r\n.ms-react-table td {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.ms-table-column-resizer::after {\r\n content: '';\r\n position: absolute;\r\n right: 0;\r\n top: 50%;\r\n width: 1.5px;\r\n height: 1.5rem;\r\n cursor: col-resize;\r\n user-select: none;\r\n background-color: #2e2e2e;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.ms-react-table th:last-child .ms-table-column-resizer {\r\n position: absolute;\r\n width: 10px;\r\n right: 5px !important;\r\n top: 0;\r\n height: 100%;\r\n}\r\n\r\n.ms-react-table th:last-child .ms-table-header-cell {\r\n margin-right: 10px;\r\n}\r\n\r\n.table-footer {\r\n padding: 5px 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-color: #ddd;\r\n}\r\n\r\n.table-footer label {\r\n font-size: 14px;\r\n}\r\n\r\n.pagination-controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.pagination-buttons {\r\n display: flex;\r\n align-items: center;\r\n line-height: 1;\r\n gap: 5px;\r\n}\r\n\r\n.pagination-buttons span {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n cursor: pointer;\r\n}\r\n\r\n.pagination-buttons span svg {\r\n width: 16px;\r\n color: #2e2e2e;\r\n}\r\n\r\n.pagination-info select {\r\n margin-left: 5px;\r\n padding: 2px 5px;\r\n border: 1px solid #2e2e2e;\r\n border-radius: 4px;\r\n background-color: white;\r\n}\r\n\r\n.pagination-info select option {\r\n border: none;\r\n outline: none;\r\n}\r\n\r\n.header-menu {\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.header-menu ul {\r\n background-color: #fff;\r\n box-shadow: 0px 0px 10px 2px #aaa;\r\n list-style: none;\r\n padding: 0;\r\n border-radius: 2px;\r\n margin: 0;\r\n width: 200px;\r\n}\r\n\r\n.header-menu ul li {\r\n cursor: pointer;\r\n position: relative;\r\n font-size: 14px;\r\n padding: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: left;\r\n gap: 5px;\r\n border-bottom: 2px groove #f3f3f3;\r\n /* Adjust thickness as needed */\r\n}\r\n\r\n.header-menu ul li:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.header-menu ul li:hover {\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.header-menu ul li:hover ul {\r\n transform: scaleX(1) !important;\r\n}\r\n\r\n.header-menu ul>li>span {\r\n line-height: .5;\r\n}\r\n\r\n.header-menu ul>li>span>svg {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n/* Child menu css */\r\n.header-menu ul li>ul {\r\n position: absolute;\r\n top: 0;\r\n right: -6.25rem;\r\n transform: scaleX(0);\r\n transition: all 0.25s ease-in-out;\r\n transform-origin: left;\r\n}\r\n\r\n.header-menu ul li>ul li span {\r\n width: 16px;\r\n}\r\n\r\n.header-menu .column-list {\r\n background-color: #f2f2f2;\r\n min-width: 160px;\r\n padding: 5px;\r\n box-shadow: 0px 0px 10px 2px #aaa;\r\n}\r\n\r\n.header-menu .column-list .search {\r\n margin-bottom: 10px;\r\n}\r\n\r\ninput.search-input {\r\n width: 100%;\r\n display: inline-block;\r\n border: 1px solid rgb(77, 77, 77);\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n}\r\n\r\n.search-input:active {\r\n /* border: 1px solid ; */\r\n}\r\n\r\n.header-menu .column-list .list {\r\n border-top: 1px solid #ccc;\r\n max-height: 300px;\r\n overflow-y: auto;\r\n}\r\n.ms-checkbox-input{\r\n height: 14px;\r\n width: 14px;\r\n}\r\n.header-menu .column-list .list .item {\r\n padding: 5px;\r\n display: flex;\r\n gap: 10px;\r\n align-items: center;\r\n}\r\n\r\n.overlay-message {\r\n position: absolute;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n/* Pinned Style start*/\r\n.left-pinned {\r\n position: sticky !important;\r\n left: 0;\r\n}\r\n\r\n.right-pinned {\r\n position: sticky !important;\r\n right: 0;\r\n}\r\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { JSX } from 'react';
|
|
2
|
+
|
|
3
|
+
interface MsTableHeaderCellTypes {
|
|
4
|
+
title: string;
|
|
5
|
+
dataIndex: string;
|
|
6
|
+
isHidden?: boolean;
|
|
7
|
+
width?: number;
|
|
8
|
+
type?: 'string' | 'number' | 'date' | 'custom';
|
|
9
|
+
align?: 'left' | 'center' | 'right';
|
|
10
|
+
sortable?: boolean;
|
|
11
|
+
sortKey?: 'asc' | 'desc' | '';
|
|
12
|
+
resizable?: boolean;
|
|
13
|
+
pinned?: 'left' | 'right' | "";
|
|
14
|
+
pinIndex?: number | null;
|
|
15
|
+
headerCellClassName?: string;
|
|
16
|
+
dataCellClassName?: string;
|
|
17
|
+
cellRenderer?: (data: any) => JSX.Element;
|
|
18
|
+
hideActionMenu?: boolean;
|
|
19
|
+
}
|
|
20
|
+
interface MsTablePropsTypes {
|
|
21
|
+
columns: MsTableHeaderCellTypes[];
|
|
22
|
+
data: any[];
|
|
23
|
+
height?: string;
|
|
24
|
+
isClientSideRendering?: boolean;
|
|
25
|
+
showPagination?: boolean;
|
|
26
|
+
pageSizeOptions?: number[];
|
|
27
|
+
defaultPageSize?: number;
|
|
28
|
+
totalRecords?: number;
|
|
29
|
+
className?: string;
|
|
30
|
+
headerClassName?: string;
|
|
31
|
+
showCheckBoxSelector?: boolean;
|
|
32
|
+
selectAllCheckbox?: boolean;
|
|
33
|
+
selectionMode?: 'single' | 'multiple';
|
|
34
|
+
style?: React.CSSProperties;
|
|
35
|
+
onSelectionChange?: (selectedRows: any[]) => void;
|
|
36
|
+
onPageChange?: (currentPage: number, pageSize: number) => void;
|
|
37
|
+
onSortChange?: (dataIndex: string, sortKey: 'asc' | 'desc' | null) => void;
|
|
38
|
+
onFilterChange?: (dataIndex: string, filterValue: any) => void;
|
|
39
|
+
onRowClick?: (rowData: any) => void;
|
|
40
|
+
ref?: React.Ref<HTMLTableElement>;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
declare const MsReactTable: React.FC<MsTablePropsTypes>;
|
|
44
|
+
|
|
45
|
+
export { MsReactTable, type MsTableHeaderCellTypes, type MsTablePropsTypes };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { JSX } from 'react';
|
|
2
|
+
|
|
3
|
+
interface MsTableHeaderCellTypes {
|
|
4
|
+
title: string;
|
|
5
|
+
dataIndex: string;
|
|
6
|
+
isHidden?: boolean;
|
|
7
|
+
width?: number;
|
|
8
|
+
type?: 'string' | 'number' | 'date' | 'custom';
|
|
9
|
+
align?: 'left' | 'center' | 'right';
|
|
10
|
+
sortable?: boolean;
|
|
11
|
+
sortKey?: 'asc' | 'desc' | '';
|
|
12
|
+
resizable?: boolean;
|
|
13
|
+
pinned?: 'left' | 'right' | "";
|
|
14
|
+
pinIndex?: number | null;
|
|
15
|
+
headerCellClassName?: string;
|
|
16
|
+
dataCellClassName?: string;
|
|
17
|
+
cellRenderer?: (data: any) => JSX.Element;
|
|
18
|
+
hideActionMenu?: boolean;
|
|
19
|
+
}
|
|
20
|
+
interface MsTablePropsTypes {
|
|
21
|
+
columns: MsTableHeaderCellTypes[];
|
|
22
|
+
data: any[];
|
|
23
|
+
height?: string;
|
|
24
|
+
isClientSideRendering?: boolean;
|
|
25
|
+
showPagination?: boolean;
|
|
26
|
+
pageSizeOptions?: number[];
|
|
27
|
+
defaultPageSize?: number;
|
|
28
|
+
totalRecords?: number;
|
|
29
|
+
className?: string;
|
|
30
|
+
headerClassName?: string;
|
|
31
|
+
showCheckBoxSelector?: boolean;
|
|
32
|
+
selectAllCheckbox?: boolean;
|
|
33
|
+
selectionMode?: 'single' | 'multiple';
|
|
34
|
+
style?: React.CSSProperties;
|
|
35
|
+
onSelectionChange?: (selectedRows: any[]) => void;
|
|
36
|
+
onPageChange?: (currentPage: number, pageSize: number) => void;
|
|
37
|
+
onSortChange?: (dataIndex: string, sortKey: 'asc' | 'desc' | null) => void;
|
|
38
|
+
onFilterChange?: (dataIndex: string, filterValue: any) => void;
|
|
39
|
+
onRowClick?: (rowData: any) => void;
|
|
40
|
+
ref?: React.Ref<HTMLTableElement>;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
declare const MsReactTable: React.FC<MsTablePropsTypes>;
|
|
44
|
+
|
|
45
|
+
export { MsReactTable, type MsTableHeaderCellTypes, type MsTablePropsTypes };
|