react-base-data-table 0.1.0 → 0.2.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 +168 -50
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,35 +1,52 @@
|
|
|
1
1
|
# @redevilkz/react-base-table
|
|
2
2
|
|
|
3
|
-
A simple and
|
|
3
|
+
A simple, customizable, and extensible React table component with support for sorting, filtering, grouping, row highlighting, custom rendering, drag-and-drop, and context menus.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **Sorting**: Click column headers to sort data ascending/descending. Custom sort logic per column supported.
|
|
10
|
+
- **Filtering**: Enable per-column filtering for quick data search.
|
|
11
|
+
- **Grouping**: Group rows by any column, with collapsible group sections.
|
|
12
|
+
- **Row Highlighting**: Highlight rows based on custom conditions.
|
|
13
|
+
- **Custom Rendering**: Render custom content in headers and cells.
|
|
14
|
+
- **Drag & Drop**: Reorder rows with drag-and-drop (optional).
|
|
15
|
+
- **Context Menu**: Right-click on cells to open a customizable context menu.
|
|
16
|
+
- **Row Actions**: Double-click, right-click, and other row/cell interactions.
|
|
17
|
+
- **Responsive & Scrollable**: Pin columns, set table height, and enable horizontal scrolling.
|
|
18
|
+
- **Theming**: Easily style with Tailwind and DaisyUI classes.
|
|
19
|
+
|
|
20
|
+
---
|
|
4
21
|
|
|
5
22
|
## Installation
|
|
6
23
|
|
|
7
24
|
Install the package via npm or yarn:
|
|
8
25
|
|
|
9
26
|
```bash
|
|
10
|
-
npm install
|
|
27
|
+
npm install react-base-data-table
|
|
11
28
|
```
|
|
12
29
|
|
|
13
30
|
or
|
|
14
31
|
|
|
15
32
|
```bash
|
|
16
|
-
yarn add
|
|
33
|
+
yarn add react-base-data-table
|
|
17
34
|
```
|
|
18
35
|
|
|
36
|
+
---
|
|
37
|
+
|
|
19
38
|
## Usage
|
|
20
39
|
|
|
21
|
-
|
|
40
|
+
Import the `BaseTable` component and its CSS:
|
|
22
41
|
|
|
23
42
|
```javascript
|
|
24
|
-
import { BaseTable } from "
|
|
25
|
-
import "
|
|
43
|
+
import { BaseTable } from "react-base-data-table";
|
|
44
|
+
import "react-base-data-table/style.css";
|
|
26
45
|
```
|
|
27
46
|
|
|
28
47
|
### Basic Example
|
|
29
48
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
```javascript
|
|
49
|
+
```jsx
|
|
33
50
|
const headers = [
|
|
34
51
|
{ id: "name", text: "Name", type: "string", sortable: true },
|
|
35
52
|
{ id: "age", text: "Age", type: "number", sortable: true },
|
|
@@ -40,29 +57,38 @@ const items = [
|
|
|
40
57
|
{ name: "Jane Smith", age: "25" },
|
|
41
58
|
];
|
|
42
59
|
|
|
43
|
-
<BaseTable headers={headers} items={items}
|
|
60
|
+
<BaseTable headers={headers} items={items} />;
|
|
44
61
|
```
|
|
45
62
|
|
|
46
|
-
|
|
63
|
+
---
|
|
47
64
|
|
|
48
|
-
|
|
65
|
+
## Props
|
|
49
66
|
|
|
50
67
|
### `BaseTableProps`
|
|
51
68
|
|
|
52
|
-
| Prop
|
|
53
|
-
|
|
|
54
|
-
| `height`
|
|
55
|
-
| `headers`
|
|
56
|
-
| `items`
|
|
57
|
-
| `marginTop`
|
|
58
|
-
| `noBorder`
|
|
59
|
-
| `pinColumns`
|
|
60
|
-
| `alignCenterInLine`
|
|
61
|
-
| `currentSortId`
|
|
62
|
-
| `highlightCondition`
|
|
63
|
-
| `onResetSort`
|
|
64
|
-
| `onRowDoubleClick`
|
|
65
|
-
| `onSortByColumn`
|
|
69
|
+
| Prop | Type | Default | Description |
|
|
70
|
+
| ----------------------- | ---------------------------------------------------------------- | ------- | ------------------------------------------ |
|
|
71
|
+
| `height` | `string` | `auto` | Sets the height of the table. |
|
|
72
|
+
| `headers` | `BaseTableHeader[]` | - | Defines the headers of the table. |
|
|
73
|
+
| `items` | `TableItem[]` | - | Data items to display in the table. |
|
|
74
|
+
| `marginTop` | `string` | `0` | Top margin for the table. |
|
|
75
|
+
| `noBorder` | `boolean` | `false` | Removes the border around the table. |
|
|
76
|
+
| `pinColumns` | `boolean` | `false` | Pins columns for horizontal scrolling. |
|
|
77
|
+
| `alignCenterInLine` | `boolean` | `false` | Centers content within rows. |
|
|
78
|
+
| `currentSortId` | `string` | - | ID of the column currently being sorted. |
|
|
79
|
+
| `highlightCondition` | `{ propertyId: string, value: unknown, style: CSSProperties }[]` | - | Conditions for highlighting rows. |
|
|
80
|
+
| `onResetSort` | `() => void` | - | Callback to reset sorting. |
|
|
81
|
+
| `onRowDoubleClick` | `(item: TableItem) => void` | - | Callback for double-clicking a row. |
|
|
82
|
+
| `onSortByColumn` | `(columnId: string) => void` | - | Callback for sorting by a column. |
|
|
83
|
+
| `showIndex` | `boolean` | `false` | Shows an index column. |
|
|
84
|
+
| `indexUseOriginalOrder` | `boolean` | `false` | Uses original item order for index column. |
|
|
85
|
+
| `contrastRow` | `boolean` | `false` | Alternates row background for contrast. |
|
|
86
|
+
| `activeFilters` | `ActiveTableFilter[]` | - | Active filters for columns. |
|
|
87
|
+
| `groupBy` | `string` | - | Groups rows by this column ID. |
|
|
88
|
+
| `currentUsername` | `string` | - | Pass current user for custom logic. |
|
|
89
|
+
| `comments` | `CommentData[]` | - | Comments to display in the table. |
|
|
90
|
+
|
|
91
|
+
---
|
|
66
92
|
|
|
67
93
|
## Header Definition
|
|
68
94
|
|
|
@@ -71,21 +97,21 @@ The `BaseTable` component accepts the following props:
|
|
|
71
97
|
| Property | Type | Description |
|
|
72
98
|
| -------------- | ----------------------------------------------------------------- | ----------------------------------------------- |
|
|
73
99
|
| `id` | `string` | Unique identifier for the column. |
|
|
74
|
-
| `text` | `string` |
|
|
75
|
-
| `type` | `'string', 'list', 'number'` |
|
|
100
|
+
| `text` | `string` | Display text for the column header. |
|
|
101
|
+
| `type` | `'string', 'list', 'number'` | Type of data in the column. |
|
|
76
102
|
| `customHeader` | `(header: BaseTableHeader) => ReactNode` | Custom rendering function for the header. |
|
|
77
103
|
| `customRender` | `(item: TableItem, header: BaseTableHeader) => ReactNode` | Custom rendering function for the cell content. |
|
|
78
|
-
| `sortable` | `boolean` | Enables sorting for the column
|
|
104
|
+
| `sortable` | `boolean` | Enables sorting for the column. |
|
|
79
105
|
| `customSort` | `(a: TableItem, b: TableItem, ascendingOrder: boolean) => number` | Custom sorting function for the column. |
|
|
80
|
-
| `hasFilter` | `boolean` | Enables filtering for the column
|
|
81
|
-
|
|
82
|
-
|
|
106
|
+
| `hasFilter` | `boolean` | Enables filtering for the column. |
|
|
107
|
+
| `children` | `BaseTableHeader[]` | Nested columns for grouped headers. |
|
|
108
|
+
| `editOptions` | `{ editable, required, type, defaultValue }` | Editing options for inline editing. |
|
|
83
109
|
|
|
84
|
-
|
|
110
|
+
---
|
|
85
111
|
|
|
86
|
-
|
|
112
|
+
## Data Items
|
|
87
113
|
|
|
88
|
-
|
|
114
|
+
A `TableItem` is an object where each key matches a column ID defined in `headers`.
|
|
89
115
|
|
|
90
116
|
```javascript
|
|
91
117
|
const item = {
|
|
@@ -94,13 +120,15 @@ const item = {
|
|
|
94
120
|
};
|
|
95
121
|
```
|
|
96
122
|
|
|
97
|
-
|
|
123
|
+
---
|
|
98
124
|
|
|
99
|
-
|
|
125
|
+
## Advanced Functionality
|
|
100
126
|
|
|
101
|
-
|
|
127
|
+
### 1. **Row Highlighting**
|
|
102
128
|
|
|
103
|
-
|
|
129
|
+
Highlight rows based on conditions:
|
|
130
|
+
|
|
131
|
+
```jsx
|
|
104
132
|
const highlightCondition = [
|
|
105
133
|
{
|
|
106
134
|
propertyId: "age",
|
|
@@ -113,14 +141,16 @@ const highlightCondition = [
|
|
|
113
141
|
headers={headers}
|
|
114
142
|
items={items}
|
|
115
143
|
highlightCondition={highlightCondition}
|
|
116
|
-
|
|
144
|
+
/>;
|
|
117
145
|
```
|
|
118
146
|
|
|
119
|
-
|
|
147
|
+
---
|
|
120
148
|
|
|
121
|
-
|
|
149
|
+
### 2. **Custom Cell Rendering**
|
|
122
150
|
|
|
123
|
-
|
|
151
|
+
Customize cell content using `customRender`:
|
|
152
|
+
|
|
153
|
+
```jsx
|
|
124
154
|
const headers = [
|
|
125
155
|
{
|
|
126
156
|
id: "name",
|
|
@@ -130,25 +160,111 @@ const headers = [
|
|
|
130
160
|
];
|
|
131
161
|
```
|
|
132
162
|
|
|
133
|
-
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
### 3. **Sorting**
|
|
134
166
|
|
|
135
167
|
Handle sorting logic with the `onSortByColumn` callback:
|
|
136
168
|
|
|
137
|
-
```
|
|
169
|
+
```jsx
|
|
138
170
|
const handleSort = (columnId) => {
|
|
139
171
|
console.log(`Sorting by column: ${columnId}`);
|
|
140
172
|
};
|
|
141
173
|
|
|
174
|
+
<BaseTable headers={headers} items={items} onSortByColumn={handleSort} />;
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
### 4. **Grouping Rows**
|
|
180
|
+
|
|
181
|
+
Group rows by a column and allow collapsing:
|
|
182
|
+
|
|
183
|
+
```jsx
|
|
142
184
|
<BaseTable
|
|
143
185
|
headers={headers}
|
|
144
186
|
items={items}
|
|
145
|
-
|
|
146
|
-
|
|
187
|
+
groupBy="department" // group by the 'department' column
|
|
188
|
+
/>
|
|
147
189
|
```
|
|
148
190
|
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
### 5. **Drag & Drop Rows**
|
|
194
|
+
|
|
195
|
+
Enable drag-and-drop row reordering:
|
|
196
|
+
|
|
197
|
+
```jsx
|
|
198
|
+
<BaseTable headers={headers} items={items} enableRowDragDrop={true} />
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
---
|
|
202
|
+
|
|
203
|
+
### 6. **Context Menu**
|
|
204
|
+
|
|
205
|
+
Show a custom context menu on right-click:
|
|
206
|
+
|
|
207
|
+
```jsx
|
|
208
|
+
<BaseTable
|
|
209
|
+
headers={headers}
|
|
210
|
+
items={items}
|
|
211
|
+
contextMenuActions={[
|
|
212
|
+
{ label: "Edit", onClick: (item) => editItem(item) },
|
|
213
|
+
{ label: "Delete", onClick: (item) => deleteItem(item) },
|
|
214
|
+
]}
|
|
215
|
+
/>
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
---
|
|
219
|
+
|
|
220
|
+
### 7. **Inline Editing**
|
|
221
|
+
|
|
222
|
+
Allow editing cell values directly in the table by setting `editOptions` in headers.
|
|
223
|
+
|
|
224
|
+
```jsx
|
|
225
|
+
const headers = [
|
|
226
|
+
{
|
|
227
|
+
id: "age",
|
|
228
|
+
text: "Age",
|
|
229
|
+
editOptions: {
|
|
230
|
+
editable: true,
|
|
231
|
+
required: true,
|
|
232
|
+
type: "number",
|
|
233
|
+
defaultValue: 0,
|
|
234
|
+
},
|
|
235
|
+
},
|
|
236
|
+
];
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
---
|
|
240
|
+
|
|
241
|
+
### 8. **Custom Header Rendering**
|
|
242
|
+
|
|
243
|
+
Render custom header content:
|
|
244
|
+
|
|
245
|
+
```jsx
|
|
246
|
+
const headers = [
|
|
247
|
+
{
|
|
248
|
+
id: "actions",
|
|
249
|
+
text: "",
|
|
250
|
+
customHeader: () => <span>Actions</span>,
|
|
251
|
+
},
|
|
252
|
+
];
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
---
|
|
256
|
+
|
|
257
|
+
## Styling & Theming
|
|
258
|
+
|
|
259
|
+
- Uses Tailwind CSS and DaisyUI for styling.
|
|
260
|
+
- You can override styles using Tailwind utility classes or DaisyUI themes.
|
|
261
|
+
- Arbitrary values (e.g. `bg-[#f44333]`) are supported if included as static strings or added to the safelist in `tailwind.config.js`.
|
|
262
|
+
|
|
263
|
+
---
|
|
264
|
+
|
|
149
265
|
## How to test the package in dev
|
|
150
266
|
|
|
151
|
-
Yalc emulates npm publish.
|
|
267
|
+
Yalc emulates npm publish. It is preferred over npm link for fewer issues.
|
|
152
268
|
|
|
153
269
|
```bash
|
|
154
270
|
npm i yalc -g
|
|
@@ -166,18 +282,20 @@ In the project that wants to consume the package:
|
|
|
166
282
|
yalc add @redevilkz/react-base-table
|
|
167
283
|
```
|
|
168
284
|
|
|
169
|
-
|
|
285
|
+
After a rebuild in your package:
|
|
170
286
|
|
|
171
287
|
```bash
|
|
172
288
|
yalc push
|
|
173
289
|
```
|
|
174
290
|
|
|
175
|
-
When you change something in your library
|
|
291
|
+
When you change something in your library:
|
|
176
292
|
|
|
177
293
|
```bash
|
|
178
294
|
npm run buildForNPM && yalc push --sig
|
|
179
295
|
```
|
|
180
296
|
|
|
297
|
+
---
|
|
298
|
+
|
|
181
299
|
## License
|
|
182
300
|
|
|
183
301
|
This project is licensed under the [MIT License](LICENSE).
|