packages/table/examples/ExpandableWithoutRowExpanded.tsx - develop - kaws/ui-kit-ce

packages/table/examples/ExpandableWithoutRowExpanded.tsx

74 строки2 KB

Nemtsev Vyacheslav

fix(table): исправлено отображение иконки у расширяемой строки таблицы

02 окт 2025, 14:22

02 окт 2025, 14:22f150b38

import * as React from 'react'
import { Table, ColumnProps, RecordDataSource, useTheme } from '@v-uik/base'

type DataSource = RecordDataSource<{ name: string; role: string }>

const dataSource: DataSource[] = [
  { name: 'Vasya', role: 'developer', key: 1 },
  { name: 'Slava', role: 'developer', key: 2 },
  { name: 'Anton', role: 'manager', key: 3 },
  { name: 'Artem', role: 'designer', key: 4 },
  { name: 'Fillip', role: 'designer', key: 5 },
]

export const ExpandableWithoutRowExpanded = (): JSX.Element => {
  const theme = useTheme()

  const [, setExpandedRows] = React.useReducer(
    (state: React.Key[], key: React.Key) => {
      const filtered = state.filter((el) => el !== key)

      return filtered.length === state.length ? state.concat(key) : filtered
    },
    []
  )

  const renderExpandableContent = React.useCallback(
    () => (
      <div
        style={{
          padding: '16px 16px 24px 56px',
          color: theme.sys.color.onBackgroundHigh,
        }}
      >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid
        asperiores consequuntur deserunt dolorem eius facilis hic incidunt magni
        nam, omnis quam quia ratione rem repellat tempore temporibus voluptate
        voluptatum.
      </div>
    ),
    [theme.sys.color.onBackgroundHigh]
  )

  const columns: ColumnProps<DataSource>[] = [
    {
      key: 'expand',
      kind: 'expand',
      isRowExpanded: null,
      renderExpandableContent,
    },
    {
      key: 'name',
      dataIndex: 'name',
      title: 'Name',
    },
    {
      key: 'role',
      dataIndex: 'role',
      title: 'Role',
    },
  ]

  return (
    <Table
      hoverable
      dataSource={dataSource}
      columns={columns}
      onChange={(params) => {
        if (params.type === 'expand' && params.row.key) {
          setExpandedRows(params.row.key)
        }
      }}
    />
  )
}