Skip to content

Commit

Permalink
fix(ts-table): interaction between getSelectionColumn and Virtualizat…
Browse files Browse the repository at this point in the history
…ion (#2051)
  • Loading branch information
matheusps authored Jan 9, 2025
2 parents b6334a2 + f15d572 commit e6aadc9
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 0 deletions.
2 changes: 2 additions & 0 deletions packages/shoreline/src/themes/sunrise/components/checkbox.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
height: var(--sl-checkbox-size);
display: flex;
width: fit-content;
position: relative;

& > [data-sl-text] {
user-select: none;
Expand All @@ -13,6 +14,7 @@

[data-sl-checkbox-label] {
margin-left: var(--sl-space-2);
position: relative;

&[data-disabled="true"] {
color: var(--sl-fg-base-disabled);
Expand Down
68 changes: 68 additions & 0 deletions packages/ts-table/src/stories/virtualized-selection.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { useMemo } from 'react'
import type { ColumnDef } from '@tanstack/react-table'
import { faker } from '@faker-js/faker'

import { useVirtualizerModel } from '../use-virtualizer-model'
import { getSelectionColumn, TsTable } from '../index'

export default {
title: 'ts-table/ts-table',
parameters: {
chromatic: { disableSnapshot: true },
},
}

interface Service {
name: string
department: string
price: string
}

const data: Service[] = Array(50000)
.fill(1)
.map((_, id) => {
return {
id: `${id}`,
name: faker.company.name(),
price: faker.commerce.price(),
department: faker.commerce.department(),
}
})

export function VirtualizedSelection() {
const columns = useMemo<Array<ColumnDef<Service>>>(
() => [
getSelectionColumn(),
{
accessorKey: 'name',
header: 'Service name',
},
{
accessorKey: 'price',
header: 'Price',
},
],
[]
)

const virtualizer = useVirtualizerModel({
count: data.length,
})

return (
<>
<TsTable
data={data}
columns={columns}
rowClick={{
type: 'action',
onClick: (row) => {
alert(`You clicked: ${row.original.name}`)
},
}}
virtualizer={virtualizer}
/>
<div style={{ marginTop: '16px' }}>Number of rows: {data.length}</div>
</>
)
}

0 comments on commit e6aadc9

Please sign in to comment.