react-hrnet-table-gandrica 1.0.4 → 1.0.6
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 +61 -58
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,67 +31,70 @@ npm install react-hrnet-table-gandrica
|
|
|
31
31
|
|
|
32
32
|
1. import { Table } from 'react-hrnet-table-gandrica';
|
|
33
33
|
2. import "react-hrnet-table-gandrica/style.css"; // Don't forget the styles!
|
|
34
|
-
3. Pass the list and tableHeaders as props Ex:
|
|
34
|
+
3. Pass the list and tableHeaders as props Ex: `<Table list={list} tableHeaders={tableHeaders}/>`
|
|
35
|
+
|
|
36
|
+
```jsx
|
|
37
|
+
import Table from "react-hrnet-table-gandrica";
|
|
35
38
|
|
|
36
39
|
export default function EmployeeList() {
|
|
37
|
-
// 1. The list array
|
|
38
|
-
const employeeList = [
|
|
39
|
-
{
|
|
40
|
-
firstName: "John",
|
|
41
|
-
lastName: "Doe",
|
|
42
|
-
startDate: "2022-01-01",
|
|
43
|
-
department: "Sales",
|
|
44
|
-
birthDate: "1990-01-01",
|
|
45
|
-
street: "123 Main St",
|
|
46
|
-
city: "New York",
|
|
47
|
-
state: "NY",
|
|
48
|
-
zipCode: "10001",
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
firstName: "Jane",
|
|
52
|
-
lastName: "Smith",
|
|
53
|
-
startDate: "2022-01-01",
|
|
54
|
-
department: "Marketing",
|
|
55
|
-
birthDate: "1995-01-01",
|
|
56
|
-
street: "456 Oak Ave",
|
|
57
|
-
city: "Los Angeles",
|
|
58
|
-
state: "CA",
|
|
59
|
-
zipCode: "90210",
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
firstName: "Michael",
|
|
63
|
-
lastName: "Johnson",
|
|
64
|
-
startDate: "2022-01-01",
|
|
65
|
-
department: "Engineering",
|
|
66
|
-
birthDate: "1985-01-01",
|
|
67
|
-
street: "789 Elm St",
|
|
68
|
-
city: "Chicago",
|
|
69
|
-
state: "IL",
|
|
70
|
-
zipCode: "60601",
|
|
71
|
-
},
|
|
72
|
-
];
|
|
73
|
-
|
|
74
|
-
// 2. The columns configuration ("First Name" = Header, firstName = data key)
|
|
75
|
-
const columns = [
|
|
76
|
-
{ firstName: "First Name" },
|
|
77
|
-
{ lastName: "Last Name" },
|
|
78
|
-
{ startDate: "Start Date" },
|
|
79
|
-
{ department: "Department" },
|
|
80
|
-
{ birthDate: "Date of Birth" },
|
|
81
|
-
{ street: "Street" },
|
|
82
|
-
{ city: "City" },
|
|
83
|
-
{ state: "State" },
|
|
84
|
-
{ zipCode: "Zip Code" },
|
|
85
|
-
];
|
|
86
|
-
|
|
87
|
-
return (
|
|
88
|
-
|
|
89
|
-
<
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
);
|
|
40
|
+
// 1. The list array
|
|
41
|
+
const employeeList = [
|
|
42
|
+
{
|
|
43
|
+
firstName: "John",
|
|
44
|
+
lastName: "Doe",
|
|
45
|
+
startDate: "2022-01-01",
|
|
46
|
+
department: "Sales",
|
|
47
|
+
birthDate: "1990-01-01",
|
|
48
|
+
street: "123 Main St",
|
|
49
|
+
city: "New York",
|
|
50
|
+
state: "NY",
|
|
51
|
+
zipCode: "10001",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
firstName: "Jane",
|
|
55
|
+
lastName: "Smith",
|
|
56
|
+
startDate: "2022-01-01",
|
|
57
|
+
department: "Marketing",
|
|
58
|
+
birthDate: "1995-01-01",
|
|
59
|
+
street: "456 Oak Ave",
|
|
60
|
+
city: "Los Angeles",
|
|
61
|
+
state: "CA",
|
|
62
|
+
zipCode: "90210",
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
firstName: "Michael",
|
|
66
|
+
lastName: "Johnson",
|
|
67
|
+
startDate: "2022-01-01",
|
|
68
|
+
department: "Engineering",
|
|
69
|
+
birthDate: "1985-01-01",
|
|
70
|
+
street: "789 Elm St",
|
|
71
|
+
city: "Chicago",
|
|
72
|
+
state: "IL",
|
|
73
|
+
zipCode: "60601",
|
|
74
|
+
},
|
|
75
|
+
];
|
|
76
|
+
|
|
77
|
+
// 2. The columns configuration ("First Name" = Header, firstName = data key)
|
|
78
|
+
const columns = [
|
|
79
|
+
{ firstName: "First Name" },
|
|
80
|
+
{ lastName: "Last Name" },
|
|
81
|
+
{ startDate: "Start Date" },
|
|
82
|
+
{ department: "Department" },
|
|
83
|
+
{ birthDate: "Date of Birth" },
|
|
84
|
+
{ street: "Street" },
|
|
85
|
+
{ city: "City" },
|
|
86
|
+
{ state: "State" },
|
|
87
|
+
{ zipCode: "Zip Code" },
|
|
88
|
+
];
|
|
89
|
+
|
|
90
|
+
return (
|
|
91
|
+
<div className="table-wrapper">
|
|
92
|
+
<h2>Current Employees</h2>
|
|
93
|
+
<Table tableHeaders="{columns}" list="{employeeList}" />
|
|
94
|
+
</div>
|
|
95
|
+
);
|
|
94
96
|
}
|
|
97
|
+
```
|
|
95
98
|
|
|
96
99
|
🎛️ Props Reference
|
|
97
100
|
Prop Name : tableHeaders
|