@neukoio/react-table 0.0.3 → 1.0.1
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/LICENSE +20 -0
- package/README.md +86 -33
- package/package.json +1 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Wan Ilhami <pagami.zonda26@gmail.com> (https://github.com/wan-ilhami)
|
|
4
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
6
|
+
in the Software without restriction, including without limitation the rights
|
|
7
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
8
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
9
|
+
furnished to do so, subject to the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12
|
+
copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
15
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
16
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
17
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
18
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
19
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
20
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,13 +1,25 @@
|
|
|
1
1
|
|
|
2
2
|
# My React Table Package
|
|
3
3
|
|
|
4
|
-
|
|
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.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 📖 Table of Contents
|
|
9
|
+
|
|
10
|
+
- [My React Table Package](#my-react-table-package)
|
|
11
|
+
- [🚀 Features](#-features)
|
|
12
|
+
- [📥 Installation](#-installation)
|
|
13
|
+
- [🛠 Usage](#-usage)
|
|
14
|
+
- [📂 File Structure](#-file-structure)
|
|
15
|
+
- [📜 License](#-license)
|
|
16
|
+
- [📋 Changelog](#-changelog)
|
|
5
17
|
|
|
6
18
|
---
|
|
7
19
|
|
|
8
20
|
## 🚀 Features
|
|
9
21
|
|
|
10
|
-
- 📦 **Reusable Components**: Includes `Table`
|
|
22
|
+
- 📦 **Reusable Components**: Includes `Table` components out of the box.
|
|
11
23
|
- 🎨 **Tailwind CSS Styling**: Fully styled and customizable using Tailwind CSS.
|
|
12
24
|
- 🛠 **Ease of Use**: Simple API for quick integration.
|
|
13
25
|
- ⚡ **Responsive Design**: Adapts seamlessly to all screen sizes.
|
|
@@ -19,7 +31,7 @@
|
|
|
19
31
|
Install the package via npm:
|
|
20
32
|
|
|
21
33
|
```bash
|
|
22
|
-
npm install react-table
|
|
34
|
+
npm install @neukoio/react-table
|
|
23
35
|
```
|
|
24
36
|
|
|
25
37
|
---
|
|
@@ -29,19 +41,72 @@ npm install react-table-neuko-io
|
|
|
29
41
|
Here's a basic example of how to use the `react-table-neuko-io` package:
|
|
30
42
|
|
|
31
43
|
```jsx
|
|
32
|
-
import React from "react";
|
|
33
|
-
import { Table
|
|
34
|
-
|
|
35
|
-
const App = () => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
44
|
+
import React, { useState } from "react";
|
|
45
|
+
import { Table } from "@neukoio/react-table";
|
|
46
|
+
|
|
47
|
+
const App = () => {
|
|
48
|
+
const [data, setData] = useState(['']);
|
|
49
|
+
const [nextToken, setNextToken] = useState(1); // Token to check if more data is available
|
|
50
|
+
// Simulated function to load more data
|
|
51
|
+
const handleLoadMore = async () => {
|
|
52
|
+
// Simulating fetching data for the next "page"
|
|
53
|
+
const newEntries = //fetch the data here
|
|
54
|
+
|
|
55
|
+
// Update data and increment nextToken
|
|
56
|
+
setData((prevData) => [...prevData, ...newEntries]);
|
|
57
|
+
setNextToken(newEntries.length > 0 ? 'newToken' : null);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const columnDefs = {
|
|
61
|
+
default: [
|
|
62
|
+
{
|
|
63
|
+
accessorKey: 'row1',
|
|
64
|
+
name: 'Row 1',
|
|
65
|
+
style: 'px-3 py-3.5 text-left text-sm font-semibold text-gray-900',
|
|
66
|
+
row: (row) => {
|
|
67
|
+
return <td className="px-3 py-4 text-sm text-gray-500 leading-loose">
|
|
68
|
+
<p>{row.row1.email}</p>
|
|
69
|
+
<p>{row.row1.nophone}</p>
|
|
70
|
+
</td>
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
//you can add more the header for table based on you want
|
|
74
|
+
],
|
|
75
|
+
sm: [
|
|
76
|
+
{
|
|
77
|
+
accessorKey: 'row1',
|
|
78
|
+
name: 'Row 1',
|
|
79
|
+
style: 'px-3 py-3.5 text-left text-xs font-semibold text-gray-900',
|
|
80
|
+
row: (row) => {
|
|
81
|
+
return <td className="px-3 py-4 text-xs text-gray-500 leading-loose">
|
|
82
|
+
<p>{row.row1.email}</p>
|
|
83
|
+
<p>{row.row1.nophone}</p>
|
|
84
|
+
</td>
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
//you can add more the header for table based on you want
|
|
88
|
+
],
|
|
89
|
+
md: [
|
|
90
|
+
{
|
|
91
|
+
accessorKey: 'row1',
|
|
92
|
+
name: 'Row 1',
|
|
93
|
+
style: 'px-3 py-3.5 text-left text-xs font-semibold text-gray-900',
|
|
94
|
+
row: (row) => {
|
|
95
|
+
return <td className="px-3 py-4 text-xs text-gray-500">{row.row1.email}</td>
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
//you can add more the header for table based on you want
|
|
99
|
+
],
|
|
100
|
+
}
|
|
40
101
|
|
|
41
102
|
return (
|
|
42
103
|
<div className="container mx-auto">
|
|
43
|
-
<Table
|
|
44
|
-
|
|
104
|
+
<Table
|
|
105
|
+
data={data}
|
|
106
|
+
columnDefs={columnDefs}
|
|
107
|
+
isMoreData={nextToken !== null} // `true` if there's more data to load
|
|
108
|
+
onLoadMore={handleLoadMore} // Function to load more data
|
|
109
|
+
/>
|
|
45
110
|
</div>
|
|
46
111
|
);
|
|
47
112
|
};
|
|
@@ -73,28 +138,16 @@ react-table-neuko-io/
|
|
|
73
138
|
|
|
74
139
|
---
|
|
75
140
|
|
|
76
|
-
##
|
|
77
|
-
|
|
78
|
-
If you'd like to contribute or make changes to the package, follow these steps:
|
|
79
|
-
|
|
80
|
-
1. Clone the repository:
|
|
81
|
-
```bash
|
|
82
|
-
git clone https://github.com/your-repo/react-table-neuko-io.git
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
2. Install dependencies:
|
|
86
|
-
```bash
|
|
87
|
-
cd react-table-neuko-io
|
|
88
|
-
npm install
|
|
89
|
-
```
|
|
141
|
+
## 📜 License
|
|
90
142
|
|
|
91
|
-
|
|
92
|
-
```bash
|
|
93
|
-
npm start
|
|
94
|
-
```
|
|
143
|
+
This project is licensed under the **MIT License**. See the [LICENSE](./LICENSE) file for details.
|
|
95
144
|
|
|
96
145
|
---
|
|
146
|
+
## 📋 Changelog
|
|
97
147
|
|
|
98
|
-
|
|
148
|
+
### [1.0.1] - 2024-12-03
|
|
149
|
+
- Add license and table of content in README.md
|
|
99
150
|
|
|
100
|
-
|
|
151
|
+
### [1.0.0] - 2024-12-03
|
|
152
|
+
- Initial release of the package.
|
|
153
|
+
- Added basic table functionality with responsive columns.
|