@neukoio/react-table 0.0.2 β 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 +118 -32
- package/dist/Table.js +10 -4
- package/package.json +1 -1
- package/src/Table.js +80 -63
package/README.md
CHANGED
|
@@ -1,52 +1,138 @@
|
|
|
1
|
-
# My React Table Package
|
|
2
1
|
|
|
3
|
-
|
|
2
|
+
# My React Table Package
|
|
3
|
+
|
|
4
|
+
**`@neukoio/react-table`** is a lightweight, customizable, and reusable table component designed for React applications. Built with React and styled using Tailwind CSS, this package simplifies the creation of interactive and visually appealing tables.
|
|
4
5
|
|
|
5
6
|
---
|
|
6
7
|
|
|
7
|
-
## Features
|
|
8
|
+
## π Features
|
|
8
9
|
|
|
9
|
-
- π¦ **Reusable Components**:
|
|
10
|
-
- π¨ **Tailwind CSS Styling**: Fully styled and customizable using Tailwind CSS.
|
|
11
|
-
- π **Ease of Use**: Simple API for quick integration.
|
|
12
|
-
- β‘ **Responsive Design**: Adapts to all screen sizes
|
|
10
|
+
- π¦ **Reusable Components**: Includes `Table` components out of the box.
|
|
11
|
+
- π¨ **Tailwind CSS Styling**: Fully styled and customizable using Tailwind CSS.
|
|
12
|
+
- π **Ease of Use**: Simple API for quick integration.
|
|
13
|
+
- β‘ **Responsive Design**: Adapts seamlessly to all screen sizes.
|
|
13
14
|
|
|
14
15
|
---
|
|
15
16
|
|
|
16
|
-
## Installation
|
|
17
|
+
## π₯ Installation
|
|
18
|
+
|
|
19
|
+
Install the package via npm:
|
|
17
20
|
|
|
18
|
-
|
|
21
|
+
```bash
|
|
22
|
+
npm install @neukoio/react-table
|
|
23
|
+
```
|
|
19
24
|
|
|
20
|
-
```bash
|
|
21
|
-
npm install react-table-neuko-io
|
|
22
|
-
```
|
|
23
25
|
---
|
|
24
|
-
## File Structure
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
## π Usage
|
|
28
|
+
|
|
29
|
+
Here's a basic example of how to use the `react-table-neuko-io` package:
|
|
30
|
+
|
|
31
|
+
```jsx
|
|
32
|
+
import React, { useState } from "react";
|
|
33
|
+
import { Table } from "@neukoio/react-table";
|
|
34
|
+
|
|
35
|
+
const App = () => {
|
|
36
|
+
const [data, setData] = useState(['']);
|
|
37
|
+
const [nextToken, setNextToken] = useState(1); // Token to check if more data is available
|
|
38
|
+
// Simulated function to load more data
|
|
39
|
+
const handleLoadMore = async () => {
|
|
40
|
+
// Simulating fetching data for the next "page"
|
|
41
|
+
const newEntries = //fetch the data here
|
|
42
|
+
|
|
43
|
+
// Update data and increment nextToken
|
|
44
|
+
setData((prevData) => [...prevData, ...newEntries]);
|
|
45
|
+
setNextToken(newEntries.length > 0 ? 'newToken' : null);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const columnDefs = {
|
|
49
|
+
default: [
|
|
50
|
+
{
|
|
51
|
+
accessorKey: 'row1',
|
|
52
|
+
name: 'Row 1',
|
|
53
|
+
style: 'px-3 py-3.5 text-left text-sm font-semibold text-gray-900',
|
|
54
|
+
row: (row) => {
|
|
55
|
+
return <td className="px-3 py-4 text-sm text-gray-500 leading-loose">
|
|
56
|
+
<p>{row.row1.email}</p>
|
|
57
|
+
<p>{row.row1.nophone}</p>
|
|
58
|
+
</td>
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
//you can add more the header for table based on you want
|
|
62
|
+
],
|
|
63
|
+
sm: [
|
|
64
|
+
{
|
|
65
|
+
accessorKey: 'row1',
|
|
66
|
+
name: 'Row 1',
|
|
67
|
+
style: 'px-3 py-3.5 text-left text-xs font-semibold text-gray-900',
|
|
68
|
+
row: (row) => {
|
|
69
|
+
return <td className="px-3 py-4 text-xs text-gray-500 leading-loose">
|
|
70
|
+
<p>{row.row1.email}</p>
|
|
71
|
+
<p>{row.row1.nophone}</p>
|
|
72
|
+
</td>
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
//you can add more the header for table based on you want
|
|
76
|
+
],
|
|
77
|
+
md: [
|
|
78
|
+
{
|
|
79
|
+
accessorKey: 'row1',
|
|
80
|
+
name: 'Row 1',
|
|
81
|
+
style: 'px-3 py-3.5 text-left text-xs font-semibold text-gray-900',
|
|
82
|
+
row: (row) => {
|
|
83
|
+
return <td className="px-3 py-4 text-xs text-gray-500">{row.row1.email}</td>
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
//you can add more the header for table based on you want
|
|
87
|
+
],
|
|
88
|
+
}
|
|
27
89
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
βββ postcss.config.js # PostCSS configuration
|
|
40
|
-
βββ README.md # Documentation
|
|
90
|
+
return (
|
|
91
|
+
<div className="container mx-auto">
|
|
92
|
+
<Table
|
|
93
|
+
data={data}
|
|
94
|
+
columnDefs={columnDefs}
|
|
95
|
+
isMoreData={nextToken !== null} // `true` if there's more data to load
|
|
96
|
+
onLoadMore={handleLoadMore} // Function to load more data
|
|
97
|
+
/>
|
|
98
|
+
</div>
|
|
99
|
+
);
|
|
100
|
+
};
|
|
41
101
|
|
|
102
|
+
export default App;
|
|
103
|
+
```
|
|
42
104
|
|
|
43
105
|
---
|
|
44
|
-
## Development
|
|
45
|
-
If you'd like to contribute or make changes to the package, follow these steps:
|
|
46
106
|
|
|
47
|
-
|
|
107
|
+
## π File Structure
|
|
108
|
+
|
|
109
|
+
Hereβs the structure of the package:
|
|
110
|
+
|
|
111
|
+
```plaintext
|
|
112
|
+
react-table-neuko-io/
|
|
113
|
+
βββ src/
|
|
114
|
+
β βββ index.js # Entry point for the components
|
|
115
|
+
β βββ Table.js # Table component
|
|
116
|
+
β βββ Button.js # Button component
|
|
117
|
+
β βββ styles.css # Tailwind CSS styles
|
|
118
|
+
β βββ useWindowSize.js # Custom hook for handling responsive design
|
|
119
|
+
βββ dist/ # Transpiled output
|
|
120
|
+
βββ package.json # Package configuration
|
|
121
|
+
βββ .babelrc # Babel configuration
|
|
122
|
+
βββ tailwind.config.js # Tailwind configuration
|
|
123
|
+
βββ postcss.config.js # PostCSS configuration
|
|
124
|
+
βββ README.md # Documentation
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## π License
|
|
130
|
+
|
|
131
|
+
This project is licensed under the **MIT License**. See the [LICENSE](./LICENSE) file for details.
|
|
48
132
|
|
|
49
133
|
---
|
|
50
|
-
##
|
|
51
|
-
This project is licensed under the MIT License. See the LICENSE file for more details.
|
|
134
|
+
## π Changelog
|
|
52
135
|
|
|
136
|
+
### [1.0.0] - 2024-12-03
|
|
137
|
+
- Initial release of the package.
|
|
138
|
+
- Added basic table functionality with responsive columns.
|
package/dist/Table.js
CHANGED
|
@@ -107,20 +107,26 @@ var Table = function Table(_ref) {
|
|
|
107
107
|
}, /*#__PURE__*/_react["default"].createElement("tr", null, currentColumnDefs.map(function (col, index) {
|
|
108
108
|
return /*#__PURE__*/_react["default"].createElement("th", {
|
|
109
109
|
key: index,
|
|
110
|
-
className: "".concat(col.style)
|
|
110
|
+
className: "".concat(col.style, " align-middle text-center whitespace-nowrap")
|
|
111
111
|
}, col.name);
|
|
112
112
|
}))), /*#__PURE__*/_react["default"].createElement("tbody", {
|
|
113
113
|
className: "divide-y divide-gray-200 bg-white"
|
|
114
|
-
}, currentData.map(function (row, rowIndex) {
|
|
114
|
+
}, currentData.length > 0 ? currentData.map(function (row, rowIndex) {
|
|
115
115
|
return /*#__PURE__*/_react["default"].createElement("tr", {
|
|
116
116
|
key: rowIndex
|
|
117
117
|
}, currentColumnDefs.map(function (column, colIndex) {
|
|
118
118
|
return /*#__PURE__*/_react["default"].createElement("td", {
|
|
119
119
|
key: "cell-".concat(rowIndex, "-").concat(colIndex),
|
|
120
|
-
className: "px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
|
|
120
|
+
className: "px-6 py-4 align-middle whitespace-nowrap text-sm font-medium text-gray-900"
|
|
121
121
|
}, column.row ? column.row(row) : row[column.accessorKey]);
|
|
122
122
|
}));
|
|
123
|
-
})
|
|
123
|
+
}) :
|
|
124
|
+
/*#__PURE__*/
|
|
125
|
+
// Render this row if there's no data
|
|
126
|
+
_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
|
|
127
|
+
colSpan: currentColumnDefs.length,
|
|
128
|
+
className: "px-6 py-4 text-center text-sm text-gray-500"
|
|
129
|
+
}, "No data available.")))))))), data.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
|
|
124
130
|
className: "flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
|
|
125
131
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
126
132
|
className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between"
|
package/package.json
CHANGED
package/src/Table.js
CHANGED
|
@@ -58,25 +58,37 @@ const Table = ({ data, columnDefs, isMoreData = false, onLoadMore = () => {} })
|
|
|
58
58
|
<thead className="bg-gray-50">
|
|
59
59
|
<tr>
|
|
60
60
|
{currentColumnDefs.map((col, index) => (
|
|
61
|
-
<th key={index} className={`${col.style}`}>
|
|
61
|
+
<th key={index} className={`${col.style} align-middle text-center whitespace-nowrap`}>
|
|
62
62
|
{col.name}
|
|
63
63
|
</th>
|
|
64
64
|
))}
|
|
65
65
|
</tr>
|
|
66
66
|
</thead>
|
|
67
67
|
<tbody className="divide-y divide-gray-200 bg-white">
|
|
68
|
-
{currentData.
|
|
69
|
-
|
|
70
|
-
{
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
68
|
+
{currentData.length > 0 ? (
|
|
69
|
+
currentData.map((row, rowIndex) => (
|
|
70
|
+
<tr key={rowIndex}>
|
|
71
|
+
{currentColumnDefs.map((column, colIndex) => (
|
|
72
|
+
<td
|
|
73
|
+
key={`cell-${rowIndex}-${colIndex}`}
|
|
74
|
+
className="px-6 py-4 align-middle whitespace-nowrap text-sm font-medium text-gray-900"
|
|
75
|
+
>
|
|
76
|
+
{column.row ? column.row(row) : row[column.accessorKey]}
|
|
77
|
+
</td>
|
|
78
|
+
))}
|
|
79
|
+
</tr>
|
|
80
|
+
))
|
|
81
|
+
) : (
|
|
82
|
+
// Render this row if there's no data
|
|
83
|
+
<tr>
|
|
84
|
+
<td
|
|
85
|
+
colSpan={currentColumnDefs.length}
|
|
86
|
+
className="px-6 py-4 text-center text-sm text-gray-500"
|
|
87
|
+
>
|
|
88
|
+
No data available.
|
|
89
|
+
</td>
|
|
78
90
|
</tr>
|
|
79
|
-
)
|
|
91
|
+
)}
|
|
80
92
|
</tbody>
|
|
81
93
|
</table>
|
|
82
94
|
</div>
|
|
@@ -85,64 +97,69 @@ const Table = ({ data, columnDefs, isMoreData = false, onLoadMore = () => {} })
|
|
|
85
97
|
</div>
|
|
86
98
|
|
|
87
99
|
{/* Pagination Section */}
|
|
88
|
-
|
|
89
|
-
<div className="
|
|
90
|
-
<div className="flex items-center">
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<nav aria-label="Pagination" className="isolate inline-flex -space-x-px rounded-md shadow-sm">
|
|
109
|
-
<button
|
|
110
|
-
onClick={handlePreviousPage}
|
|
111
|
-
className={`relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-medium ${currentPage === 1
|
|
112
|
-
? 'text-gray-300 bg-gray-50 cursor-not-allowed'
|
|
113
|
-
: 'text-gray-700 bg-white hover:bg-gray-100'
|
|
114
|
-
}`}
|
|
115
|
-
disabled={currentPage === 1}
|
|
116
|
-
>
|
|
117
|
-
<ChevronLeftIcon aria-hidden="true" className="w-5 h-5" />
|
|
118
|
-
</button>
|
|
100
|
+
{data.length > 0 && (
|
|
101
|
+
<div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
|
|
102
|
+
<div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
|
103
|
+
<div className="flex items-center">
|
|
104
|
+
<label htmlFor="results-per-page" className="mr-3 text-sm text-gray-700">
|
|
105
|
+
Results per page:
|
|
106
|
+
</label>
|
|
107
|
+
<select
|
|
108
|
+
id="results-per-page"
|
|
109
|
+
name="results-per-page"
|
|
110
|
+
value={itemsPerPage}
|
|
111
|
+
onChange={(e) => handleResultsPerPageChange(Number(e.target.value))}
|
|
112
|
+
className="block w-24 rounded-md border-gray-300 bg-white py-2 pl-3 pr-10 text-gray-900 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
|
113
|
+
>
|
|
114
|
+
<option value="10">10</option>
|
|
115
|
+
<option value="20">20</option>
|
|
116
|
+
<option value="50">50</option>
|
|
117
|
+
<option value="100">100</option>
|
|
118
|
+
</select>
|
|
119
|
+
</div>
|
|
119
120
|
|
|
120
|
-
|
|
121
|
+
<nav aria-label="Pagination" className="isolate inline-flex -space-x-px rounded-md shadow-sm">
|
|
121
122
|
<button
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
123
|
+
onClick={handlePreviousPage}
|
|
124
|
+
className={`relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-medium ${
|
|
125
|
+
currentPage === 1
|
|
126
|
+
? 'text-gray-300 bg-gray-50 cursor-not-allowed'
|
|
127
|
+
: 'text-gray-700 bg-white hover:bg-gray-100'
|
|
128
|
+
}`}
|
|
129
|
+
disabled={currentPage === 1}
|
|
128
130
|
>
|
|
129
|
-
|
|
131
|
+
<ChevronLeftIcon aria-hidden="true" className="w-5 h-5" />
|
|
130
132
|
</button>
|
|
131
|
-
))}
|
|
132
133
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
134
|
+
{[...Array(totalPages)].map((_, index) => (
|
|
135
|
+
<button
|
|
136
|
+
key={index}
|
|
137
|
+
onClick={() => setCurrentPage(index + 1)}
|
|
138
|
+
className={`relative inline-flex items-center px-4 py-2 text-sm font-medium ${
|
|
139
|
+
currentPage === index + 1
|
|
140
|
+
? 'bg-indigo-600 text-white'
|
|
141
|
+
: 'text-gray-700 bg-white hover:bg-gray-100'
|
|
142
|
+
}`}
|
|
143
|
+
>
|
|
144
|
+
{index + 1}
|
|
145
|
+
</button>
|
|
146
|
+
))}
|
|
147
|
+
|
|
148
|
+
<button
|
|
149
|
+
onClick={handleNextPage}
|
|
150
|
+
className={`relative inline-flex items-center rounded-r-md px-3 py-2 text-sm font-medium ${
|
|
151
|
+
currentPage === totalPages && !isMoreData
|
|
152
|
+
? 'text-gray-300 bg-gray-50 cursor-not-allowed'
|
|
153
|
+
: 'text-gray-700 bg-white hover:bg-gray-100'
|
|
138
154
|
}`}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
155
|
+
disabled={currentPage === totalPages && !isMoreData}
|
|
156
|
+
>
|
|
157
|
+
<ChevronRightIcon aria-hidden="true" className="w-5 h-5" />
|
|
158
|
+
</button>
|
|
159
|
+
</nav>
|
|
160
|
+
</div>
|
|
144
161
|
</div>
|
|
145
|
-
|
|
162
|
+
)}
|
|
146
163
|
</div>
|
|
147
164
|
);
|
|
148
165
|
};
|