+
handlePagination(next, size) }
- pageSizeSelectionOptions={
- [
- { id: '1', name: 1 },
- { id: '5', name: 5 },
- ]}
+ pageSize={5}
+ currentPage={currentPage}
+ onPagination={(next, size) => handlePagination(next, size)}
+ pageSizeSelectionOptions={[
+ { id: "1", name: 1 },
+ { id: "5", name: 5 },
+ ]}
/>
- }>
+ }
+ >
Name
@@ -1158,27 +1318,35 @@ of the button control.
Dependents
-
- { renderRows() }
-
+ {renderRows()}
);
- }}
+ }}
### When a child of Sidebar
-
+
{() => {
const [selectAll, setSelectAll] = useState(false);
- const [selectedRows, setSelectedRows] = useState({ one: false, two: false, three: false, four: false });
- const [highlightedRow, setHighlightedRow] = useState('');
+ const [selectedRows, setSelectedRows] = useState({
+ one: false,
+ two: false,
+ three: false,
+ four: false,
+ });
+ const [highlightedRow, setHighlightedRow] = useState("");
const handleSelectAllRows = () => {
const newState = {};
- Object.keys(selectedRows).forEach((key) => newState[key] = !selectAll);
+ Object.keys(selectedRows).forEach(
+ (key) => (newState[key] = !selectAll)
+ );
setSelectedRows({ ...newState });
setSelectAll(!selectAll);
};
@@ -1188,29 +1356,40 @@ of the button control.
}
setSelectedRows({ ...selectedRows, [id]: !selectedRows[id] });
};
- const selectedCount = Object.keys(selectedRows).filter(key => Boolean(selectedRows[key])).length;
+ const selectedCount = Object.keys(selectedRows).filter((key) =>
+ Boolean(selectedRows[key])
+ ).length;
const handleHighlightRow = (id) => {
if (highlightedRow === id) {
- setHighlightedRow('')
+ setHighlightedRow("");
} else {
setHighlightedRow(id);
}
- }
+ };
return (
<>
-
- {} }>
- {} }>
- {} }>
+
+ {}}>
+
+
+ {}}>
+
+
+ {}}>
+
+
-
+
handleSelectAllRows() }
+ as="th"
+ checked={selectAll}
+ onChange={() => handleSelectAllRows()}
/>
Name
Location
@@ -1219,29 +1398,57 @@ of the button control.
- handleHighlightRow('one') } selected={ selectedRows.one } highlighted={ highlightedRow === 'one' }>
- handleSelectRow('one')} />
+ handleHighlightRow("one")}
+ selected={selectedRows.one}
+ highlighted={highlightedRow === "one"}
+ >
+ handleSelectRow("one")}
+ />
John Doe
London
Single
0
- handleHighlightRow('two') } selected={ selectedRows.two } highlighted={ highlightedRow === 'two' }>
- handleSelectRow('two')} />
+ handleHighlightRow("two")}
+ selected={selectedRows.two}
+ highlighted={highlightedRow === "two"}
+ >
+ handleSelectRow("two")}
+ />
Jane Doe
York
Married
2
- handleHighlightRow('three') } selected={ selectedRows.three } highlighted={ highlightedRow === 'three' }>
- handleSelectRow('three')} />
+ handleHighlightRow("three")}
+ selected={selectedRows.three}
+ highlighted={highlightedRow === "three"}
+ >
+ handleSelectRow("three")}
+ />
John Smith
Edinburgh
Single
1
- handleHighlightRow('four') } selected={ selectedRows.four } highlighted={ highlightedRow === 'four' }>
- handleSelectRow('four')} />
+ handleHighlightRow("four")}
+ selected={selectedRows.four}
+ highlighted={highlightedRow === "four"}
+ >
+ handleSelectRow("four")}
+ />
Jane Smith
Newcastle
Married
@@ -1252,7 +1459,7 @@ of the button control.
);
- }}
+ }}
@@ -1261,44 +1468,46 @@ of the button control.
- {["compact", "small", "medium", "large"].map(size =>
-
-
-
- Name
- Location
- Relationship Status
- Dependents
-
-
-
-
- John Doe
- London
- Single
- 0
-
-
- Jane Doe
- York
- Married
- 2
-
-
- John Smith
- Edinburgh
- Single
- 1
-
-
- Jane Smith
- Newcastle
- Married
- 5
-
-
-
- )}
+ {["compact", "small", "medium", "large"].map((size) => (
+
+
+
+
+ Name
+ Location
+ Relationship Status
+ Dependents
+
+
+
+
+ John Doe
+ London
+ Single
+ 0
+
+
+ Jane Doe
+ York
+ Married
+ 2
+
+
+ John Smith
+ Edinburgh
+ Single
+ 1
+
+
+ Jane Smith
+ Newcastle
+ Married
+ 5
+
+
+
+
+ ))}
@@ -1306,43 +1515,52 @@ of the button control.
## Props
### FlatTable
+
### FlatTableHead
+
### FlatTableBody
+
### FlatTableRow
+
### FlatTableHeader
+
### Sort
+
### FlatTableCell
+
### FlatTableRowHeader
+
### FlatTableCheckbox
+