37 lines
929 B
TypeScript
37 lines
929 B
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { DataTable } from "./data-table"
|
|
import { columns, User } from "./column"
|
|
import { useQuery } from "react-query"
|
|
import { getUsers } from "../../user-management/action"
|
|
import { UserDetailSheet } from "./sheet"
|
|
|
|
|
|
export function UsersTable() {
|
|
const [selectedUser, setSelectedUser] = useState<User | null>(null)
|
|
const [sheetOpen, setSheetOpen] = useState(false)
|
|
|
|
const { data: users = [], isLoading } = useQuery({
|
|
queryKey: ["users"],
|
|
queryFn: getUsers,
|
|
})
|
|
|
|
const handleRowClick = (user: User) => {
|
|
setSelectedUser(user)
|
|
setSheetOpen(true)
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <div>Loading...</div>
|
|
}
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<DataTable columns={columns} data={users} onRowClick={handleRowClick} />
|
|
{selectedUser && <UserDetailSheet user={selectedUser} open={sheetOpen} onOpenChange={setSheetOpen} />}
|
|
</div>
|
|
)
|
|
}
|
|
|