10030569058

Committed 21 Jul 2024 06:42PM CUT coverage: 93.314% (-1.0%) from 94.266%

Build # 10030569058

Build Type

push

github

Committed by

web-flow

Commit Message

#178 Create responsive table component (#206)

Run Details

818 of 956 branches covered (85.56%)

Branch coverage included in aggregate %.

175 of 312 new or added lines in 2 files covered. (56.09%)

2 existing lines in 1 file now uncovered.

9022 of 9589 relevant lines covered (94.09%)

52.62 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

79.63

/apps/web/src/components/responsiveTable.tsx

import React, { Fragment, PropsWithChildren, ReactNode, useRef } from "react";
import {
    Loader,
    Paper,
    Table,
    Text,
    Transition,
    useMantineColorScheme,
    useMantineTheme,
} from "@mantine/core";
import TableResponsiveWrapper from "./tableResponsiveWrapper";
import { useElementVisibility } from "../hooks/useElementVisibility";

export interface Column<T> {
    key: string;
    label: ReactNode;
    sticky?: boolean;
    render: (item: T) => ReactNode;
}

interface ResponsiveTableProps<T> {
    columns: Column<T>[];
    items: T[];
    totalCount: number;
    fetching?: boolean;
    emptyLabel?: string;
}

const ResponsiveTable = <T extends { id: string | number }>(
    props: PropsWithChildren<ResponsiveTableProps<T>>,
) => {
    const {
        columns,
        items,
        totalCount,
        fetching = false,
        emptyLabel = "No entries found",
    } = props;
    const tableRowRef = useRef<HTMLDivElement>(null);
    const theme = useMantineTheme();
    const { colorScheme } = useMantineColorScheme();
    const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;
    const { childrenRef, isVisible } = useElementVisibility({
        element: tableRowRef,
    });

    return (
        <TableResponsiveWrapper ref={tableRowRef}>
            <Table
                width={"100%"}
                style={{ borderCollapse: "collapse" }}
                data-testid="applications-table"
            >
                <Table.Thead>
                    <Table.Tr>
                        {columns.map((column) => (
                            <Fragment key={column.key}>
                                <Table.Th
                                    ref={column.sticky ? childrenRef : null}
                                >
                                    {column.label}
                                </Table.Th>
                                {column.sticky && (
                                    <Transition
                                        mounted={isVisible}
                                        transition="scale-x"
                                        duration={500}
                                        timingFunction="ease-out"
                                    >
                                        {(styles) => (
                                            <th
                                                style={{
                                                    ...styles,
                                                    position: "sticky",
                                                    top: 0,
                                                    right: 0,
                                                    backgroundColor: bgColor,
                                                    padding:
                                                        "var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-lg))",
                                                }}
                                            >
                                                {column.label}
                                            </th>
                                        )}
                                    </Transition>
                                )}
                            </Fragment>
                        ))}
                    </Table.Tr>
                </Table.Thead>

                <Table.Tbody>
                    {fetching ? (
                        <Table.Tr>
                            <Table.Td align="center" colSpan={columns.length}>
                                <Loader data-testid="table-spinner" />
                            </Table.Td>
                        </Table.Tr>
                    ) : (
                        totalCount === 0 && (
                            <Table.Tr>
                                <Table.Td
                                    colSpan={columns.length}
                                    align="center"
                                >
                                    <Text fw={700}>{emptyLabel}</Text>
                                </Table.Td>
                            </Table.Tr>
                        )
                    )}

                    {items.map((item) => (
                        <Table.Tr key={item.id}>
                            {columns.map((column) => (
                                <Fragment key={`${item.id}-${column.key}`}>
                                    {column.sticky ? (
                                        <Table.Td
                                            pos={
                                                isVisible ? "sticky" : "initial"
                                            }
                                            top={0}
                                            right={0}
                                            p={0}
                                        >
                                            <Paper
                                                shadow={
                                                    isVisible ? "xl" : undefined
                                                }
                                                radius={0}
                                                p="var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs))"
                                            >
                                                {column.render(item)}
                                            </Paper>
                                        </Table.Td>
                                    ) : (
                                        <Table.Td>
                                            {column.render(item)}
                                        </Table.Td>
                                    )}
                                </Fragment>
                            ))}
                        </Table.Tr>
                    ))}
                </Table.Tbody>
            </Table>
        </TableResponsiveWrapper>
    );
};

export default ResponsiveTable;

1	import React, { Fragment, PropsWithChildren, ReactNode, useRef } from "react";	1✔
2	import {	1✔
3	Loader,	1✔
4	Paper,	1✔
5	Table,	1✔
6	Text,	1✔
7	Transition,	1✔
8	useMantineColorScheme,	1✔
9	useMantineTheme,	1✔
10	} from "@mantine/core";	1✔
11	import TableResponsiveWrapper from "./tableResponsiveWrapper";	1✔
12	import { useElementVisibility } from "../hooks/useElementVisibility";	1✔
13		1✔
14	export interface Column<T> {	1✔
15	key: string;	1✔
16	label: ReactNode;	1✔
17	sticky?: boolean;	1✔
18	render: (item: T) => ReactNode;	1✔
19	}	1✔
20		1✔
21	interface ResponsiveTableProps<T> {	1✔
22	columns: Column<T>[];	1✔
23	items: T[];	1✔
24	totalCount: number;	1✔
25	fetching?: boolean;	1✔
26	emptyLabel?: string;	1✔
27	}	1✔
28		1✔
29	const ResponsiveTable = <T extends { id: string \| number }>(	1✔
30	props: PropsWithChildren<ResponsiveTableProps<T>>,	9✔
31	) => {	9✔
32	const {	9✔
33	columns,	9✔
34	items,	9✔
35	totalCount,	9✔
36	fetching = false,	9✔
37	emptyLabel = "No entries found",	9✔
38	} = props;	9✔
39	const tableRowRef = useRef<HTMLDivElement>(null);	9✔
40	const theme = useMantineTheme();	9✔
41	const { colorScheme } = useMantineColorScheme();	9✔
42	const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;	9!
43	const { childrenRef, isVisible } = useElementVisibility({	9✔
44	element: tableRowRef,	9✔
45	});	9✔
46		9✔
47	return (	9✔
48	<TableResponsiveWrapper ref={tableRowRef}>	9✔
49	<Table	9✔
50	width={"100%"}	9✔
51	style={{ borderCollapse: "collapse" }}	9✔
52	data-testid="applications-table"	9✔
53	>	9✔
54	<Table.Thead>	9✔
55	<Table.Tr>	9✔
56	{columns.map((column) => (	9✔
57	<Fragment key={column.key}>	28✔
58	<Table.Th	28✔
59	ref={column.sticky ? childrenRef : null}	28✔
60	>	28✔
61	{column.label}	28✔
62	</Table.Th>	28✔
63	{column.sticky && (	28✔
64	<Transition	5✔
65	mounted={isVisible}	5✔
66	transition="scale-x"	5✔
67	duration={500}	5✔
68	timingFunction="ease-out"	5✔
69	>	5✔
70	{(styles) => (	5✔
NEW 71	<th	×
NEW 72	style={{	×
NEW 73	...styles,	×
NEW 74	position: "sticky",	×
NEW 75	top: 0,	×
NEW 76	right: 0,	×
NEW 77	backgroundColor: bgColor,	×
NEW 78	padding:	×
NEW 79	"var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-lg))",	×
NEW 80	}}	×
NEW 81	>	×
NEW 82	{column.label}	×
NEW 83	</th>	×
84	)}	5✔
85	</Transition>	5✔
86	)}	28✔
87	</Fragment>	28✔
88	))}	9✔
89	</Table.Tr>	9✔
90	</Table.Thead>	9✔
91		9✔
92	<Table.Tbody>	9✔
93	{fetching ? (	9✔
94	<Table.Tr>	1✔
95	<Table.Td align="center" colSpan={columns.length}>	1✔
96	<Loader data-testid="table-spinner" />	1✔
97	</Table.Td>	1✔
98	</Table.Tr>	1✔
99	) : (	8✔
100	totalCount === 0 && (	8✔
101	<Table.Tr>	6✔
102	<Table.Td	6✔
103	colSpan={columns.length}	6✔
104	align="center"	6✔
105	>	6✔
106	<Text fw={700}>{emptyLabel}</Text>	6✔
107	</Table.Td>	6✔
108	</Table.Tr>	6✔
109	)	9✔
110	)}	9✔
111		9✔
112	{items.map((item) => (	9✔
113	<Table.Tr key={item.id}>	8✔
114	{columns.map((column) => (	8✔
115	<Fragment key={`${item.id}-${column.key}`}>	16✔
116	{column.sticky ? (	16!
NEW 117	<Table.Td	×
NEW 118	pos={	×
NEW 119	isVisible ? "sticky" : "initial"	×
NEW 120	}	×
NEW 121	top={0}	×
NEW 122	right={0}	×
NEW 123	p={0}	×
NEW 124	>	×
NEW 125	<Paper	×
NEW 126	shadow={	×
NEW 127	isVisible ? "xl" : undefined	×
NEW 128	}	×
NEW 129	radius={0}	×
NEW 130	p="var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs))"	×
NEW 131	>	×
NEW 132	{column.render(item)}	×
NEW 133	</Paper>	×
NEW 134	</Table.Td>	×
135	) : (	16✔
136	<Table.Td>	16✔
137	{column.render(item)}	16✔
138	</Table.Td>	16✔
139	)}	16✔
140	</Fragment>	16✔
141	))}	8✔
142	</Table.Tr>	8✔
143	))}	9✔
144	</Table.Tbody>	9✔
145	</Table>	9✔
146	</TableResponsiveWrapper>	9✔
147	);	9✔
148	};	9✔
149		1✔
150	export default ResponsiveTable;	1✔

cartesi / rollups-explorer / 10030569058

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous