-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat (IDE-555): Add infinite scroll to table component (#140)
* feat (IDE-555): Add infinite scroll to table component * fix: simplify code * chore: comment * chore: comment * chore: uncommect * feat: add example * chore: disable loader * fix: remove unused sentinel * refactor: move static data to data.tsx * fix: remove unused ref * chore: remove comment * feat: add loader in the table end * feat: add loader in the table end * chore: make sure row and col keys are different * feat: add faker js * chore: remove ununsed import * chore: increase per page data * chore: remove loader
- Loading branch information
1 parent
f13da1a
commit 26f6c32
Showing
8 changed files
with
9,813 additions
and
7,626 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
import React, { useState, useCallback, useEffect } from "react"; | ||
import dayjs from "dayjs"; | ||
import { | ||
ApsaraColumnDef, | ||
Checkbox, | ||
|
@@ -8,54 +10,9 @@ import { | |
Text, | ||
useTable, | ||
} from "@raystack/apsara"; | ||
import dayjs from "dayjs"; | ||
import * as React from "react"; | ||
|
||
const data: Payment[] = [ | ||
{ | ||
id: "m5gr84i9", | ||
amount: 316, | ||
status: "success", | ||
email: "[email protected]", | ||
created_at: "2023-10-10T13:02:56.12Z", | ||
}, | ||
{ | ||
id: "3u1reuv4", | ||
amount: 242, | ||
status: "success", | ||
email: "[email protected]", | ||
created_at: "2023-09-15T11:55:46.28Z", | ||
}, | ||
{ | ||
id: "derv1ws0", | ||
amount: 837, | ||
status: "processing", | ||
email: "[email protected]", | ||
created_at: "2023-07-01T10:02:50.60Z", | ||
}, | ||
{ | ||
id: "5kma53ae", | ||
amount: 874, | ||
status: "success", | ||
email: "[email protected]", | ||
created_at: "2023-05-30T09:02:26.49Z", | ||
}, | ||
{ | ||
id: "bhqecj4p", | ||
amount: 721, | ||
status: "failed", | ||
email: "[email protected]", | ||
created_at: "2024-04-20T21:02:01.25Z", | ||
}, | ||
]; | ||
|
||
export type Payment = { | ||
id: string; | ||
amount: number; | ||
status: "pending" | "processing" | "success" | "failed"; | ||
email: string; | ||
created_at: string; | ||
}; | ||
import { getData, Payment } from "./data"; | ||
const TOTAL_PAGES = 100; | ||
|
||
export const columns: ApsaraColumnDef<Payment>[] = [ | ||
{ | ||
|
@@ -135,31 +92,51 @@ export const columns: ApsaraColumnDef<Payment>[] = [ | |
]; | ||
|
||
export const Assets = () => { | ||
const [isLoading, setIsLoading] = React.useState(false); | ||
const [isLoading, setIsLoading] = useState(false); | ||
const [page, setPage] = useState(1); | ||
const [hasMoreData, setHasMoreData] = useState(true); | ||
const [data, setData] = useState<Payment[]>([]); | ||
|
||
const loadMoreData = useCallback(() => { | ||
if (!isLoading && hasMoreData) { | ||
setIsLoading(true); | ||
// API simulation call to fetch more data | ||
setTimeout(() => { | ||
const moreData = getData(); | ||
setData((prevData) => [...prevData, ...moreData]); | ||
setPage((prevPage) => prevPage + 1); | ||
setIsLoading(false); | ||
if (page >= TOTAL_PAGES) { | ||
setHasMoreData(false); | ||
} | ||
}, 1000); | ||
} | ||
}, [isLoading, hasMoreData, page]); | ||
|
||
function onSwitchChange() { | ||
setIsLoading((prev) => !prev); | ||
} | ||
useEffect(() => { | ||
setData(getData()) | ||
}, []) | ||
|
||
return ( | ||
<DataTable | ||
columns={columns} | ||
data={data} | ||
initialState={{ sorting: [{ id: "amount", desc: true }] }} | ||
isLoading={isLoading} | ||
onLoadMore={loadMoreData} | ||
> | ||
<DataTable.Toolbar> | ||
<AssetsHeader onSwitchChange={onSwitchChange} /> | ||
<AssetsHeader /> | ||
<DataTable.FilterChips /> | ||
</DataTable.Toolbar> | ||
<DataTable.Footer> | ||
<AssetsFooter /> | ||
<></> | ||
</DataTable.Footer> | ||
</DataTable> | ||
); | ||
}; | ||
|
||
const AssetsHeader = ({ onSwitchChange }) => { | ||
const AssetsHeader = () => { | ||
const { filteredColumns, table } = useTable(); | ||
const isFiltered = filteredColumns.length > 0; | ||
return ( | ||
|
@@ -170,12 +147,9 @@ const AssetsHeader = ({ onSwitchChange }) => { | |
> | ||
<Flex gap="extra-large" align="center"> | ||
<Text style={{ fontWeight: 500 }}>Assets</Text> | ||
<Flex gap="small" align="center"> | ||
<Label>Show Loader</Label> | ||
<Switch onCheckedChange={onSwitchChange} /> | ||
</Flex> | ||
</Flex> | ||
<Flex gap="small"> | ||
<AssetsFooter /> | ||
{isFiltered ? <DataTable.ClearFilter /> : <DataTable.FilterOptions />} | ||
<DataTable.ViewOptions /> | ||
<DataTable.GloabalSearch placeholder="Search assets..." /> | ||
|
@@ -191,7 +165,7 @@ const AssetsFooter = () => { | |
<Flex align="center" justify="between" style={{ width: "100%" }}> | ||
<Text> | ||
{table.getFilteredSelectedRowModel().rows.length} of{" "} | ||
{table.getFilteredRowModel().rows.length} row(s) selected. | ||
{getData().length * (TOTAL_PAGES + 1)} row(s) selected. | ||
</Text> | ||
</Flex> | ||
); | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
const { faker } = require('@faker-js/faker'); | ||
import { | ||
BlendingModeIcon, | ||
BoxIcon, | ||
Component2Icon, | ||
FaceIcon, | ||
Half2Icon, | ||
InfoCircledIcon, | ||
Link2Icon, | ||
ReaderIcon, | ||
TargetIcon, | ||
} from "@radix-ui/react-icons"; | ||
|
||
export type Payment = { | ||
id: string; | ||
amount: number; | ||
status: "pending" | "processing" | "success" | "failed"; | ||
email: string; | ||
created_at: string; | ||
}; | ||
|
||
function createRandomData() { | ||
return { | ||
id: faker.string.uuid(), | ||
amount: faker.number.int(), | ||
status: faker.string.alpha(5), | ||
email: faker.internet.email(), | ||
created_at: faker.date.birthdate() | ||
}; | ||
} | ||
|
||
export const getData = () => faker.helpers.multiple(createRandomData, { | ||
count: 35, | ||
}); | ||
|
||
|
||
export const navigationList = [ | ||
{ | ||
href: "#shield", | ||
leadingIcon: <InfoCircledIcon />, | ||
name: "Inbox", | ||
}, | ||
{ | ||
active: true, | ||
href: "#assets", | ||
leadingIcon: <BlendingModeIcon />, | ||
name: "Assets", | ||
}, | ||
{ | ||
leadingIcon: <BoxIcon />, | ||
name: "Lineage", | ||
disabled: true, | ||
}, | ||
{ | ||
leadingIcon: <Component2Icon />, | ||
name: "Appeals", | ||
disabled: true, | ||
}, | ||
{ | ||
leadingIcon: <TargetIcon />, | ||
name: "Grants", | ||
disabled: true, | ||
}, | ||
{ | ||
leadingIcon: <Half2Icon />, | ||
name: "Policies", | ||
disabled: true, | ||
}, | ||
{ | ||
leadingIcon: <ReaderIcon />, | ||
name: "Reports", | ||
disabled: true, | ||
}, | ||
{ | ||
leadingIcon: <FaceIcon />, | ||
name: "Teams", | ||
disabled: true, | ||
}, | ||
{ | ||
leadingIcon: <Link2Icon />, | ||
name: "Connections", | ||
disabled: true, | ||
}, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.