https://github.com/jusexton/react-table-practice
https://github.com/jusexton/react-table-practice
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/jusexton/react-table-practice
- Owner: jusexton
- Created: 2022-01-25T01:08:08.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-25T08:02:04.000Z (over 4 years ago)
- Last Synced: 2023-10-04T16:43:17.571Z (over 2 years ago)
- Language: JavaScript
- Size: 287 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Table Practice
## Simple Example
```jsx
const people = [
{
firstName: "Justin",
lastName: "Sexton",
},
{
firstName: "Foo",
lastName: "Bar",
},
{
firstName: "Baz",
lastName: "Bob",
},
];
const headers = ["First Name", "Last Name"];
const App = () => {
return (
<>
{headers.map((header, index) => {
return {header};
})}
{people.map((person, index) => {
return (
{person.firstName}
{person.lastName}
);
})}
>
);
};
```
## Example With Checkbox Selection
```jsx
const people = [
{
firstName: "Justin",
lastName: "Sexton",
},
{
firstName: "Foo",
lastName: "Bar",
},
{
firstName: "Baz",
lastName: "Bob",
},
];
const headers = ["First Name", "Last Name"];
const App = () => {
const selectedValues = useRef({});
const { isToggled: allValuesSelected, toggle: toggleAll } = useToggle();
const toggleSingle = (selected, { firstName, lastName }) => {
const key = `${firstName}${lastName}`;
selectedValues.current = {
...selectedValues.current,
[key]: allValuesSelected || selected,
};
};
return (
<>
{headers.map((header, index) => {
return {header};
})}
{people.map((person, index) => {
return (
toggleSingle(selected, person)}
>
{person.firstName}
{person.lastName}
);
})}
>
);
};
```