Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //incident table
- import React, { useState } from "react";
- import Pagination from "@/components/general/pagination/"
- import {
- DataGrid,
- DataGridHeader,
- DataGridRow,
- DataGridHeaderCell,
- DataGridBody,
- DataGridCell,
- RowRenderer,
- DataGridProps,
- } from "@fluentui-contrib/react-data-grid-react-window";
- import { TableColumnDefinition, useFluent, useScrollbarWidth } from "@fluentui/react-components";
- interface TableProps<TItem> {
- items: Array<TItem>;
- columns: TableColumnDefinition<TItem>[];
- columnSizingOptions: any;
- sortState: Parameters<NonNullable<DataGridProps["onSortChange"]>>[1];
- onSortChange: (e: React.MouseEvent, sortState: Parameters<NonNullable<DataGridProps["onSortChange"]>>[1]) => void;
- }
- const tableStyles: React.CSSProperties = {
- backgroundColor: "transparent",
- borderRadius: "5px",
- width: "80vw",
- marginTop: "4.5em",
- };
- const headerStyles = {
- borderBottom: "1px solid lightgrey",
- backgroundColor: "white"
- };
- const Table = ({ items, columns, columnSizingOptions, sortState, onSortChange }: TableProps<any>) => {
- const [currentPage, setCurrentPage] = useState(1);
- const { targetDocument } = useFluent();
- const scrollbarWidth = useScrollbarWidth({ targetDocument });
- const [sortedItems, setSortedItems] = useState(items)
- const handlePageChange = (pageNumber: number) => {
- setCurrentPage(pageNumber);
- };
- const itemsPerPage = 13;
- const startIndex = (currentPage - 1) * itemsPerPage;
- const endIndex = Math.min(startIndex + itemsPerPage, items.length);
- let visibleItems = items.slice(startIndex, endIndex);
- const RenderRow: RowRenderer<any> = ({ item, rowId }) => {
- const [isHovered, setIsHovered] = useState(false);
- const handleMouseEnter = () => {
- setIsHovered(true);
- };
- const handleMouseLeave = () => {
- setIsHovered(false);
- };
- const rowStyle = {
- borderBottom: "1px solid lightgrey",
- height: "4em",
- backgroundColor: "#f6f6f6",
- ...(isHovered && { backgroundColor: "#e5e5e5" })
- };
- return (
- <DataGridRow<any>
- key={rowId}
- style={rowStyle}
- onMouseEnter={handleMouseEnter}
- onMouseLeave={handleMouseLeave}
- >
- {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
- </DataGridRow>
- );
- };
- return (
- <div style={tableStyles}>
- <>
- <DataGrid
- items={visibleItems}
- columns={columns}
- focusMode="composite"
- sortable
- resizableColumns
- style={{ width: "max-content" }}
- size="extra-small"
- columnSizingOptions={
- columnSizingOptions ? columnSizingOptions : null
- }
- sortState={sortState}
- onSortChange={onSortChange}
- >
- <DataGridHeader style={{ paddingRight: scrollbarWidth, ...headerStyles }}>
- <DataGridRow>
- {({ renderHeaderCell }) => (
- <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
- )}
- </DataGridRow>
- </DataGridHeader>
- <DataGridBody itemSize={50} height={visibleItems.length * 50}>
- {RenderRow}
- </DataGridBody>
- </DataGrid>
- <Pagination
- totalItems={items.length}
- itemsPerPage={itemsPerPage}
- currentPage={currentPage}
- onPageChange={handlePageChange}
- />
- </>
- </div>
- );
- };
- export default Table;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement