1.2.6 • Published 9 months ago
@quentinm22/table-cmp-react v1.2.6
@quentinm22/table-cmp-react
PACKAGE table
Installation
Install Package in React project
npm i @quentinm22/table-cmp-react
yarn add @quentinm22/table-cmp-react
Update
npm i @quentinm22/table-cmp-react@latest
yarn add @quentinm22/table-cmp-react@latest
Usage/Examples
import {Table} from '@quentinm22/table-cmp-react'
function App() {
const [tableEmployee, setTableEmployee] = useState([])
const [attributes, setAttributes] = useState([])
const [dataTest, setDataTest] = useState(false)
const mockData = [{
"firstName": "John",
"lastName": "Doe",
"startDate": "2022-01-01",
"department": "Marketing",
"dateOfBirth": "1990-05-15",
"street": "123 Main St",
"city": "New York",
"state": "NY",
"zipCode": "10001"
},
{
"firstName": "Jane",
"lastName": "Smith",
"startDate": "2021-07-15",
"department": "Human Resources",
"dateOfBirth": "1985-12-10",
"street": "456 Elm St",
"city": "Los Angeles",
"state": "CA",
"zipCode": "90001"
},
{
"firstName": "Michael",
"lastName": "Johnson",
"startDate": "2020-03-10",
"department": "Finance",
"dateOfBirth": "1978-09-20",
"street": "789 Oak St",
"city": "Chicago",
"state": "IL",
"zipCode": "60601"
}]
useEffect(() => {
let arrayAllEmployee = []
let attributesFilter = ["firstName", "lastName"]
if (dataTest) {
mockData.map((data) => arrayAllEmployee.push(data))
}
setTableEmployee(arrayAllEmployee)
setAttributes(attributesFilter)
}, [dataTest])
return (
<div
style={{
padding: "150px",
}}
>
<label>MockData</label>
<input type="checkbox" onChange={() => setDataTest(!dataTest)} />
<Table
title="Current Employees"
arrayElement={tableEmployee}
attributes={attributes}
colorPrimary="#0a3d62"
colorSecondary="#60a3bc"
/>
</div>
)
}
Props | Value |
---|---|
title | string |
arrayElement | array => object |
attribute | array => string (name of attributes for search input) |
colorPrimary | string => color hexa |
colorSecondary | string => color hexa |
Authors
1.2.6
9 months ago
1.2.5
9 months ago
1.2.4
9 months ago
1.1.5
9 months ago
1.1.0
9 months ago
1.0.24
9 months ago
1.0.23
9 months ago
1.0.22
9 months ago
1.0.21
9 months ago
1.0.20
9 months ago
1.0.19
9 months ago
1.0.18
9 months ago
1.0.17
9 months ago
1.0.16
9 months ago
1.0.15
9 months ago
1.0.14
9 months ago
1.0.13
9 months ago
1.0.12
9 months ago
1.0.11
9 months ago
1.0.10
9 months ago
1.0.9
9 months ago
1.0.8
9 months ago
1.0.7
9 months ago
1.0.6
9 months ago
1.0.5
9 months ago
1.0.4
9 months ago
1.0.3
9 months ago
1.0.2
9 months ago
1.0.1
9 months ago
1.0.0
9 months ago
0.1.26
9 months ago
0.1.25
9 months ago
0.1.24
9 months ago
0.1.23
9 months ago
0.1.22
9 months ago
0.1.21
9 months ago
0.1.20
9 months ago
0.1.19
9 months ago
0.1.18
9 months ago
0.1.17
9 months ago
0.1.16
9 months ago
0.1.15
9 months ago
0.1.14
9 months ago
0.1.13
9 months ago
0.1.12
9 months ago
0.1.11
9 months ago
0.1.10
9 months ago
0.1.9
9 months ago
0.1.8
9 months ago
0.1.7
9 months ago
0.1.6
9 months ago
0.1.5
9 months ago
0.1.4
9 months ago
0.1.3
9 months ago
0.1.2
9 months ago
0.1.1
9 months ago
0.1.0
9 months ago