archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

docs(table): use case example (#1326)

Browse Source
This commit is contained in:
Tianen Pang 2023-08-09 01:43:40 +08:00 committed by GitHub
parent 0ef41d27e7
commit 894d85d059
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/docs/app/examples/table/use-case/page.tsx
View File

@ -271,8 +271,6 @@ export default function Page() {
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const pages = Math.ceil(users.length / rowsPerPage);
const hasSearchFilter = Boolean(filterValue); const hasSearchFilter = Boolean(filterValue);
const headerColumns = useMemo(() => { const headerColumns = useMemo(() => {
@ -298,6 +296,8 @@ export default function Page() {
return filteredUsers; return filteredUsers;
}, [users, filterValue, statusFilter]); }, [users, filterValue, statusFilter]);
const pages = Math.ceil(filteredItems.length / rowsPerPage);
const items = useMemo(() => { const items = useMemo(() => {
const start = (page - 1) * rowsPerPage; const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage; const end = start + rowsPerPage;
@ -390,6 +390,11 @@ export default function Page() {
} }
}, []); }, []);
const onClear = useCallback(() => {
setFilterValue("");
setPage(1);
}, []);
const topContent = useMemo(() => { const topContent = useMemo(() => {
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
@ -400,7 +405,7 @@ export default function Page() {
placeholder="Search by name..." placeholder="Search by name..."
startContent={<SearchIcon />} startContent={<SearchIcon />}
value={filterValue} value={filterValue}
onClear={() => setFilterValue("")} onClear={() => onClear()}
onValueChange={onSearchChange} onValueChange={onSearchChange}
/> />
<div className="flex gap-3"> <div className="flex gap-3">
@ -483,23 +488,22 @@ export default function Page() {
<span className="w-[30%] text-small text-default-400"> <span className="w-[30%] text-small text-default-400">
{selectedKeys === "all" {selectedKeys === "all"
? "All items selected" ? "All items selected"
: `${selectedKeys.size} of ${items.length} selected`} : `${selectedKeys.size} of ${filteredItems.length} selected`}
</span> </span>
<Pagination <Pagination
isCompact isCompact
showControls showControls
showShadow showShadow
color="primary" color="primary"
isDisabled={hasSearchFilter}
page={page} page={page}
total={pages} total={pages}
onChange={setPage} onChange={setPage}
/> />
<div className="hidden sm:flex w-[30%] justify-end gap-2"> <div className="hidden sm:flex w-[30%] justify-end gap-2">
<Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}> <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
Previous Previous
</Button> </Button>
<Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}> <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
Next Next
</Button> </Button>
</div> </div>

39
apps/docs/content/components/table/use-case.ts
View File

@ -360,8 +360,6 @@ export default function App() {
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const pages = Math.ceil(users.length / rowsPerPage);
const hasSearchFilter = Boolean(filterValue); const hasSearchFilter = Boolean(filterValue);
const headerColumns = React.useMemo(() => { const headerColumns = React.useMemo(() => {
@ -387,6 +385,8 @@ export default function App() {
return filteredUsers; return filteredUsers;
}, [users, filterValue, statusFilter]); }, [users, filterValue, statusFilter]);
const pages = Math.ceil(filteredItems.length / rowsPerPage);
const items = React.useMemo(() => { const items = React.useMemo(() => {
const start = (page - 1) * rowsPerPage; const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage; const end = start + rowsPerPage;
@ -452,7 +452,7 @@ export default function App() {
return cellValue; return cellValue;
} }
}, []); }, []);
const onNextPage = React.useCallback(() => { const onNextPage = React.useCallback(() => {
if (page < pages) { if (page < pages) {
setPage(page + 1); setPage(page + 1);
@ -479,6 +479,11 @@ export default function App() {
} }
}, []); }, []);
const onClear = useCallback(()=>{
setFilterValue("")
setPage(1)
},[])
const topContent = React.useMemo(() => { const topContent = React.useMemo(() => {
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
@ -489,7 +494,7 @@ export default function App() {
placeholder="Search by name..." placeholder="Search by name..."
startContent={<SearchIcon />} startContent={<SearchIcon />}
value={filterValue} value={filterValue}
onClear={() => setFilterValue("")} onClear={() => onClear()}
onValueChange={onSearchChange} onValueChange={onSearchChange}
/> />
<div className="flex gap-3"> <div className="flex gap-3">
@ -572,23 +577,22 @@ export default function App() {
<span className="w-[30%] text-small text-default-400"> <span className="w-[30%] text-small text-default-400">
{selectedKeys === "all" {selectedKeys === "all"
? "All items selected" ? "All items selected"
: \`\${selectedKeys.size} of \${items.length} selected\`} : \`\${selectedKeys.size} of \${filteredItems.length} selected\`}
</span> </span>
<Pagination <Pagination
isCompact isCompact
showControls showControls
showShadow showShadow
color="primary" color="primary"
isDisabled={hasSearchFilter}
page={page} page={page}
total={pages} total={pages}
onChange={setPage} onChange={setPage}
/> />
<div className="hidden sm:flex w-[30%] justify-end gap-2"> <div className="hidden sm:flex w-[30%] justify-end gap-2">
<Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}> <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
Previous Previous
</Button> </Button>
<Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}> <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
Next Next
</Button> </Button>
</div> </div>
@ -684,7 +688,6 @@ export default function App() {
}); });
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const pages = Math.ceil(users.length / rowsPerPage);
const hasSearchFilter = Boolean(filterValue); const hasSearchFilter = Boolean(filterValue);
@ -711,6 +714,8 @@ export default function App() {
return filteredUsers; return filteredUsers;
}, [users, filterValue, statusFilter]); }, [users, filterValue, statusFilter]);
const pages = Math.ceil(filteredItems.length / rowsPerPage);
const items = React.useMemo(() => { const items = React.useMemo(() => {
const start = (page - 1) * rowsPerPage; const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage; const end = start + rowsPerPage;
@ -776,7 +781,7 @@ export default function App() {
return cellValue; return cellValue;
} }
}, []); }, []);
const onNextPage = React.useCallback(() => { const onNextPage = React.useCallback(() => {
if (page < pages) { if (page < pages) {
setPage(page + 1); setPage(page + 1);
@ -803,6 +808,11 @@ export default function App() {
} }
}, []); }, []);
const onClear = useCallback(()=>{
setFilterValue("")
setPage(1)
},[])
const topContent = React.useMemo(() => { const topContent = React.useMemo(() => {
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
@ -813,7 +823,7 @@ export default function App() {
placeholder="Search by name..." placeholder="Search by name..."
startContent={<SearchIcon />} startContent={<SearchIcon />}
value={filterValue} value={filterValue}
onClear={() => setFilterValue("")} onClear={() => onClear()}
onValueChange={onSearchChange} onValueChange={onSearchChange}
/> />
<div className="flex gap-3"> <div className="flex gap-3">
@ -896,23 +906,22 @@ export default function App() {
<span className="w-[30%] text-small text-default-400"> <span className="w-[30%] text-small text-default-400">
{selectedKeys === "all" {selectedKeys === "all"
? "All items selected" ? "All items selected"
: \`\${selectedKeys.size} of \${items.length} selected\`} : \`\${selectedKeys.size} of \${filteredItems.length} selected\`}
</span> </span>
<Pagination <Pagination
isCompact isCompact
showControls showControls
showShadow showShadow
color="primary" color="primary"
isDisabled={hasSearchFilter}
page={page} page={page}
total={pages} total={pages}
onChange={setPage} onChange={setPage}
/> />
<div className="hidden sm:flex w-[30%] justify-end gap-2"> <div className="hidden sm:flex w-[30%] justify-end gap-2">
<Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onPreviousPage}> <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
Previous Previous
</Button> </Button>
<Button isDisabled={hasSearchFilter} size="sm" variant="flat" onPress={onNextPage}> <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
Next Next
</Button> </Button>
</div> </div>