Skip to content

Commit

Permalink
🚸 (results) Remove useless scrollbars and make header sticky
Browse files Browse the repository at this point in the history 
Closes #297
  • Loading branch information
@baptisteArno
baptisteArno committed Feb 10, 2023
1 parent 3ab6790 commit b98aef5
Show file tree
Hide file tree
Showing 7 changed files with 90 additions and 81 deletions.
4 changes: 3 additions & 1 deletion apps/builder/src/features/results/components/ResultsTable/Cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ type Props = {
cell: CellProps<TableData, unknown>
size: number
isExpandButtonVisible: boolean
rowIndex: number
cellIndex: number
isSelected: boolean
onExpandButtonClick: () => void
Expand All @@ -17,6 +18,7 @@ const Cell = ({
cell,
size,
isExpandButtonVisible,
rowIndex,
cellIndex,
onExpandButtonClick,
}: Props) => {
Expand All @@ -25,7 +27,7 @@ const Cell = ({
key={cell.id}
px="4"
py="2"
border="1px"
borderWidth={rowIndex === 0 ? '0 1px 1px 1px' : '1px'}
borderColor={useColorModeValue('gray.200', 'gray.700')}
whiteSpace="nowrap"
wordBreak="normal"
Expand Down
114 changes: 58 additions & 56 deletions apps/builder/src/features/results/components/ResultsTable/ColumnsSettingsButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,66 +96,68 @@ export const ColumnSettingsButton = ({
<PopoverTrigger>
<Button leftIcon={<ToolIcon />}>Columns</Button>
</PopoverTrigger>
<PopoverContent w="400px">
<PopoverBody
as={Stack}
spacing="4"
p="4"
maxH="450px"
overflowY="scroll"
>
<Stack>
<Text fontWeight="semibold" fontSize="sm">
Shown in table:
</Text>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
>
<SortableContext
items={columnOrder}
strategy={verticalListSortingStrategy}
>
{visibleHeaders.map((header) => (
<SortableColumns
key={header.id}
header={header}
onEyeClick={onEyeClick}
/>
))}
</SortableContext>
<Portal>
<DragOverlay dropAnimation={{ duration: 0 }}>
{draggingColumnId ? <Flex /> : null}
</DragOverlay>
</Portal>
</DndContext>
</Stack>
{hiddenHeaders.length > 0 && (
<Portal>
<PopoverContent w="400px">
<PopoverBody
as={Stack}
spacing="4"
p="4"
maxH="450px"
overflowY="scroll"
>
<Stack>
<Text fontWeight="semibold" fontSize="sm">
Hidden in table:
Shown in table:
</Text>
{hiddenHeaders.map((header) => (
<Flex key={header.id} justify="space-between">
<HStack>
<HeaderIcon header={header} />
<Text>{header.label}</Text>
</HStack>
<IconButton
icon={<EyeOffIcon />}
size="sm"
aria-label={'Hide column'}
onClick={onEyeClick(header.id)}
/>
</Flex>
))}
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
>
<SortableContext
items={columnOrder}
strategy={verticalListSortingStrategy}
>
{visibleHeaders.map((header) => (
<SortableColumns
key={header.id}
header={header}
onEyeClick={onEyeClick}
/>
))}
</SortableContext>
<Portal>
<DragOverlay dropAnimation={{ duration: 0 }}>
{draggingColumnId ? <Flex /> : null}
</DragOverlay>
</Portal>
</DndContext>
</Stack>
)}
</PopoverBody>
</PopoverContent>
{hiddenHeaders.length > 0 && (
<Stack>
<Text fontWeight="semibold" fontSize="sm">
Hidden in table:
</Text>
{hiddenHeaders.map((header) => (
<Flex key={header.id} justify="space-between">
<HStack>
<HeaderIcon header={header} />
<Text>{header.label}</Text>
</HStack>
<IconButton
icon={<EyeOffIcon />}
size="sm"
aria-label={'Hide column'}
onClick={onEyeClick(header.id)}
/>
</Flex>
))}
</Stack>
)}
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
)
}
Expand Down
18 changes: 13 additions & 5 deletions apps/builder/src/features/results/components/ResultsTable/HeaderRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,37 @@
import { colors } from '@/lib/theme'
import { Box, BoxProps, chakra, useColorModeValue } from '@chakra-ui/react'
import { flexRender, HeaderGroup } from '@tanstack/react-table'
import React from 'react'
import { TableData } from '../../types'

type Props = {
headerGroup: HeaderGroup<TableData>
isTableScrolled: boolean
}

export const HeaderRow = ({ headerGroup }: Props) => {
const borderColor = useColorModeValue('gray.200', 'gray.700')
export const HeaderRow = ({ headerGroup, isTableScrolled }: Props) => {
const borderColor = useColorModeValue(colors.gray[200], colors.gray[700])
const backgroundColor = useColorModeValue('white', colors.gray[900])

return (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<chakra.th
key={header.id}
px="4"
py="2"
pos="relative"
border="1px"
py="3"
borderX="1px"
borderColor={borderColor}
backgroundColor={isTableScrolled ? backgroundColor : undefined}
zIndex={10}
pos="sticky"
top="0"
fontWeight="normal"
whiteSpace="nowrap"
wordBreak="normal"
colSpan={header.colSpan}
shadow={`inset 0 1px 0 ${borderColor}, inset 0 -1px 0 ${borderColor}; `}
style={{
minWidth: header.getSize(),
maxWidth: header.getSize(),
Expand Down
19 changes: 11 additions & 8 deletions apps/builder/src/features/results/components/ResultsTable/ResultsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export const ResultsTable = ({
const background = useColorModeValue('white', colors.gray[900])
const { updateTypebot } = useTypebot()
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({})
const [isTableScrolled, setIsTableScrolled] = useState(false)
const bottomElement = useRef<HTMLDivElement | null>(null)
const tableWrapper = useRef<HTMLDivElement | null>(null)

Expand Down Expand Up @@ -197,13 +198,7 @@ export const ResultsTable = ({
}

return (
<Stack
maxW="1600px"
px="4"
overflow="scroll"
spacing={6}
ref={tableWrapper}
>
<Stack maxW="1600px" px="4" overflowY="hidden" spacing={6}>
<Flex w="full" justifyContent="flex-end">
<ResultsActionButtons
selectedResultsId={Object.keys(rowSelection)}
Expand All @@ -219,6 +214,7 @@ export const ResultsTable = ({
/>
</Flex>
<Box
ref={tableWrapper}
overflow="scroll"
rounded="md"
data-testid="results-table"
Expand All @@ -227,11 +223,18 @@ export const ResultsTable = ({
backgroundRepeat="no-repeat"
backgroundSize="30px 100%, 30px 100%, 15px 100%, 15px 100%"
backgroundAttachment="local, local, scroll, scroll"
onScroll={(e) =>
setIsTableScrolled((e.target as HTMLElement).scrollTop > 0)
}
>
<chakra.table rounded="md">
<thead>
{instance.getHeaderGroups().map((headerGroup) => (
<HeaderRow key={headerGroup.id} headerGroup={headerGroup} />
<HeaderRow
key={headerGroup.id}
headerGroup={headerGroup}
isTableScrolled={isTableScrolled}
/>
))}
</thead>

Expand Down
1 change: 1 addition & 0 deletions apps/builder/src/features/results/components/ResultsTable/Row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export const Row = ({
cell={cell}
size={cell.column.getSize()}
isExpandButtonVisible={isExpandButtonVisible}
rowIndex={row.index}
cellIndex={cellIndex}
onExpandButtonClick={onExpandButtonClick}
isSelected={isSelected}
Expand Down
2 changes: 1 addition & 1 deletion apps/builder/src/features/results/components/ResultsTable/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { ResultsTable as SubmissionsTable } from './ResultsTable'
export { ResultsTable } from './ResultsTable'
13 changes: 3 additions & 10 deletions apps/builder/src/features/results/components/ResultsTableContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { LogsModal } from './LogsModal'
import { useTypebot } from '@/features/editor'
import { useResults } from '../ResultsProvider'
import { ResultModal } from './ResultModal'
import { SubmissionsTable } from './ResultsTable'
import { ResultsTable } from './ResultsTable'

export const ResultsTableContainer = () => {
const {
Expand Down Expand Up @@ -35,14 +35,7 @@ export const ResultsTableContainer = () => {
setExpandedResultIndex(index)

return (
<Stack
pb="28"
px={['4', '0']}
spacing="4"
maxW="1600px"
overflow="scroll"
w="full"
>
<Stack pb="28" px={['4', '0']} spacing="4" maxW="1600px" w="full">
{publishedTypebot && (
<LogsModal
typebotId={publishedTypebot?.typebotId}
Expand All @@ -56,7 +49,7 @@ export const ResultsTableContainer = () => {
/>

{typebot && (
<SubmissionsTable
<ResultsTable
preferences={typebot.resultsTablePreferences ?? undefined}
resultHeader={resultHeader}
data={tableData}
Expand Down

2 comments on commit b98aef5

@vercel
Copy link

@vercel vercel bot commented on b98aef5 Feb 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docs – ./apps/docs

docs-typebot-io.vercel.app
docs.typebot.io
docs-git-main-typebot-io.vercel.app

@vercel
Copy link

@vercel vercel bot commented on b98aef5 Feb 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

builder-v2 – ./apps/builder

builder-v2-git-main-typebot-io.vercel.app
builder-v2-typebot-io.vercel.app
app.typebot.io

Please sign in to comment.