jattac.libs.web.responsive-table 0.1.0 → 0.1.2
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 +30 -57
- package/dist/index.d.ts +3 -1
- package/package.json +1 -1
- package/src/index.tsx +3 -1
package/README.md
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
ResponsiveTable is a powerful, lightweight, and fully responsive React component for creating beautiful and functional tables. It’s designed to look great on any device, adapting from a traditional table layout on desktops to a clean, card-based view on mobile screens.
|
|
4
4
|
|
|
5
|
-
 <!-- Replace with an actual demo GIF -->
|
|
6
|
-
|
|
7
5
|
## Features
|
|
8
6
|
|
|
9
7
|
- **Mobile-First Design**: Automatically switches to a card layout on smaller screens for optimal readability.
|
|
@@ -83,14 +81,7 @@ const AnimatedTable = () => {
|
|
|
83
81
|
}, 2000);
|
|
84
82
|
}, []);
|
|
85
83
|
|
|
86
|
-
return
|
|
87
|
-
<ResponsiveTable
|
|
88
|
-
columnDefinitions={columns}
|
|
89
|
-
data={data}
|
|
90
|
-
isLoading={isLoading}
|
|
91
|
-
animateOnLoad={true}
|
|
92
|
-
/>
|
|
93
|
-
);
|
|
84
|
+
return <ResponsiveTable columnDefinitions={columns} data={data} isLoading={isLoading} animateOnLoad={true} />;
|
|
94
85
|
};
|
|
95
86
|
```
|
|
96
87
|
|
|
@@ -117,13 +108,7 @@ const ClickableRows = () => {
|
|
|
117
108
|
alert(`You clicked on product ID: ${item.id}`);
|
|
118
109
|
};
|
|
119
110
|
|
|
120
|
-
return
|
|
121
|
-
<ResponsiveTable
|
|
122
|
-
columnDefinitions={columns}
|
|
123
|
-
data={data}
|
|
124
|
-
onRowClick={handleRowClick}
|
|
125
|
-
/>
|
|
126
|
-
);
|
|
111
|
+
return <ResponsiveTable columnDefinitions={columns} data={data} onRowClick={handleRowClick} />;
|
|
127
112
|
};
|
|
128
113
|
```
|
|
129
114
|
|
|
@@ -153,9 +138,7 @@ const CustomCells = () => {
|
|
|
153
138
|
},
|
|
154
139
|
{
|
|
155
140
|
displayLabel: 'Action',
|
|
156
|
-
cellRenderer: (row) => (
|
|
157
|
-
<button onClick={() => alert(`Editing ${row.user}`)}>Edit</button>
|
|
158
|
-
),
|
|
141
|
+
cellRenderer: (row) => <button onClick={() => alert(`Editing ${row.user}`)}>Edit</button>,
|
|
159
142
|
},
|
|
160
143
|
];
|
|
161
144
|
|
|
@@ -187,11 +170,7 @@ const DynamicColumns = ({ isAdmin }) => {
|
|
|
187
170
|
if (isAdmin) {
|
|
188
171
|
columns.push({
|
|
189
172
|
displayLabel: 'Admin Actions',
|
|
190
|
-
cellRenderer: (row) => (
|
|
191
|
-
<button onClick={() => alert(`Deleting ${row.fileName}`)}>
|
|
192
|
-
Delete
|
|
193
|
-
</button>
|
|
194
|
-
),
|
|
173
|
+
cellRenderer: (row) => <button onClick={() => alert(`Deleting ${row.fileName}`)}>Delete</button>,
|
|
195
174
|
});
|
|
196
175
|
}
|
|
197
176
|
|
|
@@ -242,13 +221,7 @@ const TableWithFooter = () => {
|
|
|
242
221
|
},
|
|
243
222
|
];
|
|
244
223
|
|
|
245
|
-
return
|
|
246
|
-
<ResponsiveTable
|
|
247
|
-
columnDefinitions={columns}
|
|
248
|
-
data={data}
|
|
249
|
-
footerRows={footerRows}
|
|
250
|
-
/>
|
|
251
|
-
);
|
|
224
|
+
return <ResponsiveTable columnDefinitions={columns} data={data} footerRows={footerRows} />;
|
|
252
225
|
};
|
|
253
226
|
```
|
|
254
227
|
|
|
@@ -258,40 +231,40 @@ const TableWithFooter = () => {
|
|
|
258
231
|
|
|
259
232
|
### `ResponsiveTable` Props
|
|
260
233
|
|
|
261
|
-
| Prop | Type
|
|
262
|
-
| ------------------- |
|
|
263
|
-
| `columnDefinitions` | `IResponsiveTableColumnDefinition[]`
|
|
264
|
-
| `data` | `TData[]`
|
|
265
|
-
| `isLoading` | `boolean`
|
|
266
|
-
| `animateOnLoad` | `boolean`
|
|
267
|
-
| `footerRows` | `IFooterRowDefinition[]`
|
|
268
|
-
| `onRowClick` | `(item: TData) => void`
|
|
269
|
-
| `noDataComponent` | `ReactNode`
|
|
270
|
-
| `maxHeight` | `string`
|
|
271
|
-
| `mobileBreakpoint` | `number`
|
|
234
|
+
| Prop | Type | Required | Description |
|
|
235
|
+
| ------------------- | ------------------------------------ | -------- | ----------------------------------------------------------------------------------- |
|
|
236
|
+
| `columnDefinitions` | `IResponsiveTableColumnDefinition[]` | Yes | An array of objects defining the table columns. |
|
|
237
|
+
| `data` | `TData[]` | Yes | An array of data objects to populate the table rows. |
|
|
238
|
+
| `isLoading` | `boolean` | No | If `true`, displays a skeleton loader. Defaults to `false`. |
|
|
239
|
+
| `animateOnLoad` | `boolean` | No | If `true`, animates the rows with a staggered entrance effect. Defaults to `false`. |
|
|
240
|
+
| `footerRows` | `IFooterRowDefinition[]` | No | An array of objects defining the table footer. |
|
|
241
|
+
| `onRowClick` | `(item: TData) => void` | No | A callback function that is triggered when a row is clicked. |
|
|
242
|
+
| `noDataComponent` | `ReactNode` | No | A custom component to display when there is no data. |
|
|
243
|
+
| `maxHeight` | `string` | No | Sets a maximum height for the table body, making it scrollable. |
|
|
244
|
+
| `mobileBreakpoint` | `number` | No | The pixel width at which the table switches to the mobile view. Defaults to `600`. |
|
|
272
245
|
|
|
273
246
|
### `IResponsiveTableColumnDefinition`
|
|
274
247
|
|
|
275
|
-
| Property
|
|
276
|
-
|
|
|
277
|
-
| `displayLabel`
|
|
278
|
-
| `cellRenderer`
|
|
279
|
-
| `dataKey`
|
|
280
|
-
| `interactivity
|
|
248
|
+
| Property | Type | Required | Description |
|
|
249
|
+
| --------------- | --------------------------- | -------- | ------------------------------------------------------------------------------ |
|
|
250
|
+
| `displayLabel` | `string` | Yes | The label displayed in the table header. |
|
|
251
|
+
| `cellRenderer` | `(row: TData) => ReactNode` | Yes | A function that returns the content to be rendered in the cell. |
|
|
252
|
+
| `dataKey` | `string` | No | A key to match the column to a property in the data object (optional). |
|
|
253
|
+
| `interactivity` | `object` | No | An object to define header interactivity (`onHeaderClick`, `id`, `className`). |
|
|
281
254
|
|
|
282
255
|
### `IFooterRowDefinition`
|
|
283
256
|
|
|
284
|
-
| Property
|
|
285
|
-
|
|
|
286
|
-
| `columns`
|
|
257
|
+
| Property | Type | Required | Description |
|
|
258
|
+
| --------- | --------------------------- | -------- | -------------------------------------------------- |
|
|
259
|
+
| `columns` | `IFooterColumnDefinition[]` | Yes | An array of column definitions for the footer row. |
|
|
287
260
|
|
|
288
261
|
### `IFooterColumnDefinition`
|
|
289
262
|
|
|
290
|
-
| Property | Type
|
|
291
|
-
| -------------- |
|
|
292
|
-
| `colSpan` | `number`
|
|
293
|
-
| `cellRenderer` | `() => ReactNode`
|
|
263
|
+
| Property | Type | Required | Description |
|
|
264
|
+
| -------------- | ----------------- | -------- | -------------------------------------------------------- |
|
|
265
|
+
| `colSpan` | `number` | Yes | The number of columns the footer cell should span. |
|
|
266
|
+
| `cellRenderer` | `() => ReactNode` | Yes | A function that returns the content for the footer cell. |
|
|
294
267
|
|
|
295
268
|
## License
|
|
296
269
|
|
|
297
|
-
This project is licensed under the MIT License.
|
|
270
|
+
This project is licensed under the MIT License.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import IFooterColumnDefinition from './Data/IFooterColumnDefinition';
|
|
2
|
+
import IFooterRowDefinition from './Data/IFooterRowDefinition';
|
|
1
3
|
import IResponsiveTableColumnDefinition from './Data/IResponsiveTableColumnDefinition';
|
|
2
4
|
import ResponsiveTable, { ColumnDefinition } from './UI/ResponsiveTable';
|
|
3
|
-
export { IResponsiveTableColumnDefinition, ColumnDefinition };
|
|
5
|
+
export { IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition };
|
|
4
6
|
export default ResponsiveTable;
|
package/package.json
CHANGED
package/src/index.tsx
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import IFooterColumnDefinition from './Data/IFooterColumnDefinition';
|
|
2
|
+
import IFooterRowDefinition from './Data/IFooterRowDefinition';
|
|
1
3
|
import IResponsiveTableColumnDefinition from './Data/IResponsiveTableColumnDefinition';
|
|
2
4
|
import ResponsiveTable, { ColumnDefinition } from './UI/ResponsiveTable';
|
|
3
5
|
|
|
4
|
-
export { IResponsiveTableColumnDefinition, ColumnDefinition };
|
|
6
|
+
export { IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition };
|
|
5
7
|
export default ResponsiveTable;
|