diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index d264bd8..a9d3052 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -39,6 +39,8 @@ export const TableRender = ( getRowKey, rowHoverEffect, onScrollToBottom, + borderBetweenColumns = true, + borderBetweenRows = true, ...otherProps } = props; @@ -95,6 +97,8 @@ export const TableRender = ( stickyRightOffsetsAtom={stickyRightOffsetsAtom} bordersAtom={bordersFlattenedHeadersAtom} tableRef={scrollElementRef} + borderBetweenColumns={borderBetweenColumns} + borderBetweenRows={borderBetweenRows} /> } body={ @@ -112,6 +116,8 @@ export const TableRender = ( rowHoverEffect={rowHoverEffect} leftNoVisibleItemsAtom={leftNoVisibleItemsAtom} rightNoVisibleItemsAtom={rightNoVisibleItemsAtom} + borderBetweenColumns={borderBetweenColumns} + borderBetweenRows={borderBetweenRows} /> } /> diff --git a/src/components/Table/TableData/TableData.tsx b/src/components/Table/TableData/TableData.tsx index 126093c..20e0f94 100644 --- a/src/components/Table/TableData/TableData.tsx +++ b/src/components/Table/TableData/TableData.tsx @@ -58,6 +58,8 @@ const TableDataRender = ( rowHoverEffect, leftNoVisibleItemsAtom, rightNoVisibleItemsAtom, + borderBetweenColumns, + borderBetweenRows, ...otherProps } = props; @@ -88,6 +90,8 @@ const TableDataRender = ( ref={rowsRefs[rowIndex]} leftNoVisibleItemsAtom={leftNoVisibleItemsAtom} rightNoVisibleItemsAtom={rightNoVisibleItemsAtom} + borderBetweenColumns={borderBetweenColumns} + borderBetweenRows={borderBetweenRows} /> ); })} diff --git a/src/components/Table/TableHeader/TableHeader.tsx b/src/components/Table/TableHeader/TableHeader.tsx index 39f0cf2..4985744 100644 --- a/src/components/Table/TableHeader/TableHeader.tsx +++ b/src/components/Table/TableHeader/TableHeader.tsx @@ -26,6 +26,8 @@ export const TableHeader: TableHeaderComponent = forwardRef((props, ref) => { headerCellsRefsAtom, bordersAtom, tableRef, + borderBetweenColumns, + borderBetweenRows, ...otherProps } = props; @@ -54,9 +56,9 @@ export const TableHeader: TableHeaderComponent = forwardRef((props, ref) => { className={cnTableHeader('Cell', { pinned: !!column.pinned }, [ cnTableCell({ separator: column.isSeparator, - borderLeft: borders[index][0], - borderRight: borders[index][1], - borderTop: borders[index][2], + borderLeft: borderBetweenColumns ? borders[index][0] : false, + borderRight: borderBetweenColumns ? borders[index][1] : false, + borderTop: borderBetweenRows ? borders[index][2] : false, sticky: !!column.pinned || stickyHeader, up: !!column.pinned, }), diff --git a/src/components/Table/TableRow/TableRow.tsx b/src/components/Table/TableRow/TableRow.tsx index fb6da87..b3e4f20 100644 --- a/src/components/Table/TableRow/TableRow.tsx +++ b/src/components/Table/TableRow/TableRow.tsx @@ -19,6 +19,8 @@ type TableRowProps = PropsWithHTMLAttributesAndRef< tableRef: React.RefObject; leftNoVisibleItemsAtom: AtomMut; rightNoVisibleItemsAtom: AtomMut; + borderBetweenColumns?: boolean; + borderBetweenRows?: boolean; }, HTMLDivElement >; @@ -55,6 +57,8 @@ export const TableRow: TableRowComponent = forwardRef((props, ref) => { tableRef, leftNoVisibleItemsAtom, rightNoVisibleItemsAtom, + borderBetweenColumns, + borderBetweenRows, ...otherProps } = props; const [lowHeaders] = useAtom(lowHeadersAtom); @@ -104,13 +108,21 @@ export const TableRow: TableRowComponent = forwardRef((props, ref) => { = ( type GetRowKey = (row: ROW) => string | number; ``` -| Свойство | Тип | По умолчанию | Описание | -| ------------------ | ----------------------------- | ----------------- | ------------------------------------------------------------ | -| `columns?` | `TableColumn[]` | - | Колонки | -| `rows?` | `ROW[]` | - | Строки | -| `getRowKey?` | `GetRowKey` | `(row) => row.id` | Функция получения ключа, если ключ не найден берется `index` | -| `onRowMouseEnter?` | `TableRowMouseEvent` | - | Событие `onMouseEnter` на строке | -| `onRowMouseLeave?` | `TableRowMouseEvent` | - | Событие `onMouseLeave` на строке | -| `onRowClick?` | `TableRowMouseEvent` | - | Событие `onClick` на строке | -| `virtualScroll?` | `boolean` | - | Включение виртуальной прокрутки | -| `stickyHeader?` | `boolean` | - | Зафиксировать шапку сверху | -| `resizable?` | `'inside'` | `'outside'` | - | Включение возможности изменять ширину колонок | -| `zebraStriped?` | `boolean` | - | Окрашивание строк через одну | -| `headerZIndex?` | `number` | `1` | `zIndex` шапки | -| `rowHoverEffect?` | `boolean` | - | Включает эффект наведения на строку | -| `className?` | `string` | - | Дополнительный CSS-класс | -| `ref?` | `React.Ref` | - | Ссылка на корневой DOM-элемент | +| Свойство | Тип | По умолчанию | Описание | +| -------------------- | ----------------------------- | ----------------- | ------------------------------------------------------------ | +| `columns?` | `TableColumn[]` | - | Колонки | +| `rows?` | `ROW[]` | - | Строки | +| `getRowKey?` | `GetRowKey` | `(row) => row.id` | Функция получения ключа, если ключ не найден берется `index` | +| `onRowMouseEnter?` | `TableRowMouseEvent` | - | Событие `onMouseEnter` на строке | +| `onRowMouseLeave?` | `TableRowMouseEvent` | - | Событие `onMouseLeave` на строке | +| `onRowClick?` | `TableRowMouseEvent` | - | Событие `onClick` на строке | +| `virtualScroll?` | `boolean` | - | Включение виртуальной прокрутки | +| `stickyHeader?` | `boolean` | - | Зафиксировать шапку сверху | +| `resizable?` | `'inside'` | `'outside'` | - | Включение возможности изменять ширину колонок | +| `zebraStriped?` | `boolean` | - | Окрашивание строк через одну | +| `headerZIndex?` | `number` | `1` | `zIndex` шапки | +| `rowHoverEffect?` | `boolean` | - | Включает эффект наведения на строку | +| `className?` | `string` | - | Дополнительный CSS-класс | +| `ref?` | `React.Ref` | - | Ссылка на корневой DOM-элемент | +| `borderBetweenColumns?` | `boolean` | true | Отображение границ между колонками | +| `borderBetweenRows?` | `boolean` | true | Отображение границ между строками | ## Колонка @@ -2041,7 +2043,7 @@ export const TableExampleRenderRow = () => { ## Состояние загрузки -Загрузку можно отобразить двумя видами с помощью `Loader` или `Skeleton. +Загрузку можно отобразить двумя видами с помощью `Loader` или `Skeleton`. **Пример загрузки данных всей таблицы с помощью `Loader`:** diff --git a/src/components/Table/__stand__/Table.variants.tsx b/src/components/Table/__stand__/Table.variants.tsx index 61cf7b5..2c9f51d 100644 --- a/src/components/Table/__stand__/Table.variants.tsx +++ b/src/components/Table/__stand__/Table.variants.tsx @@ -136,6 +136,8 @@ const Variants = () => { const resizable = useSelect('resizable', ['outside', 'inside']); const withRenderCell = useBoolean('withRenderCell'); const withRenderHeaderCell = useBoolean('withRenderHeaderCell'); + const borderBetweenColumns = useBoolean('borderBetweenColumns', true); + const borderBetweenRows = useBoolean('borderBetweenRows', true); const virtualScrollProp = virtualScroll ? virtualScrollMap[virtualScroll] @@ -328,6 +330,8 @@ const Variants = () => { stickyHeader={stickyHeader} virtualScroll={virtualScrollProp} style={{ maxHeight: '100%' }} + borderBetweenColumns={borderBetweenColumns} + borderBetweenRows={borderBetweenRows} /> ); diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts index 5b82bc2..5c9405e 100644 --- a/src/components/Table/types.ts +++ b/src/components/Table/types.ts @@ -90,6 +90,8 @@ export type TableProps = PropsWithHTMLAttributesAndRef< headerZIndex?: number; rowHoverEffect?: boolean; onScrollToBottom?: (length: number) => void; + borderBetweenColumns?: boolean; + borderBetweenRows?: boolean; }, HTMLDivElement >; @@ -108,6 +110,8 @@ export type TableHeaderProps = headerCellsRefsAtom: AtomMut[]>; bordersAtom: AtomMut<[boolean, boolean, boolean][]>; tableRef: React.RefObject; + borderBetweenColumns?: boolean; + borderBetweenRows?: boolean; }, HTMLDivElement >; @@ -169,6 +173,8 @@ export type TableDataProps = rowHoverEffect?: boolean; leftNoVisibleItemsAtom: AtomMut; rightNoVisibleItemsAtom: AtomMut; + borderBetweenColumns?: boolean; + borderBetweenRows?: boolean; }, HTMLDivElement > & {