Skip to content

feat(Table): add prop to toggle borders #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
baevm wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat(Table): add prop to toggle borders #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/components/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ export const TableRender = (
getRowKey,
rowHoverEffect,
onScrollToBottom,
borderBetweenColumns = true,
borderBetweenRows = true,
...otherProps
} = props;

Expand Down Expand Up @@ -95,6 +97,8 @@ export const TableRender = (
stickyRightOffsetsAtom={stickyRightOffsetsAtom}
bordersAtom={bordersFlattenedHeadersAtom}
tableRef={scrollElementRef}
borderBetweenColumns={borderBetweenColumns}
borderBetweenRows={borderBetweenRows}
/>
}
body={
Expand All @@ -112,6 +116,8 @@ export const TableRender = (
rowHoverEffect={rowHoverEffect}
leftNoVisibleItemsAtom={leftNoVisibleItemsAtom}
rightNoVisibleItemsAtom={rightNoVisibleItemsAtom}
borderBetweenColumns={borderBetweenColumns}
borderBetweenRows={borderBetweenRows}
/>
}
/>
Expand Down
4 changes: 4 additions & 0 deletions src/components/Table/TableData/TableData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ const TableDataRender = (
rowHoverEffect,
leftNoVisibleItemsAtom,
rightNoVisibleItemsAtom,
borderBetweenColumns,
borderBetweenRows,
...otherProps
} = props;

Expand Down Expand Up @@ -88,6 +90,8 @@ const TableDataRender = (
ref={rowsRefs[rowIndex]}
leftNoVisibleItemsAtom={leftNoVisibleItemsAtom}
rightNoVisibleItemsAtom={rightNoVisibleItemsAtom}
borderBetweenColumns={borderBetweenColumns}
borderBetweenRows={borderBetweenRows}
/>
);
})}
Expand Down
8 changes: 5 additions & 3 deletions src/components/Table/TableHeader/TableHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ export const TableHeader: TableHeaderComponent = forwardRef((props, ref) => {
headerCellsRefsAtom,
bordersAtom,
tableRef,
borderBetweenColumns,
borderBetweenRows,
...otherProps
} = props;

Expand Down Expand Up @@ -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,
}),
Expand Down
20 changes: 16 additions & 4 deletions src/components/Table/TableRow/TableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ type TableRowProps = PropsWithHTMLAttributesAndRef<
tableRef: React.RefObject<HTMLDivElement>;
leftNoVisibleItemsAtom: AtomMut<number>;
rightNoVisibleItemsAtom: AtomMut<number>;
borderBetweenColumns?: boolean;
borderBetweenRows?: boolean;
},
HTMLDivElement
>;
Expand Down Expand Up @@ -55,6 +57,8 @@ export const TableRow: TableRowComponent = forwardRef((props, ref) => {
tableRef,
leftNoVisibleItemsAtom,
rightNoVisibleItemsAtom,
borderBetweenColumns,
borderBetweenRows,
...otherProps
} = props;
const [lowHeaders] = useAtom(lowHeadersAtom);
Expand Down Expand Up @@ -104,13 +108,21 @@ export const TableRow: TableRowComponent = forwardRef((props, ref) => {
<TableRowCell
key={cnTableRow('Cell', { key: accessor || columnIndex })}
borderLeft={
columnIndex !== 0 &&
!(pinned !== 'left' && lowHeaders[columnIndex - 1]?.pinned === 'left')
borderBetweenColumns
? columnIndex !== 0 &&
!(
pinned !== 'left' &&
lowHeaders[columnIndex - 1]?.pinned === 'left'
)
: false
}
borderRight={
pinned === 'left' && lowHeaders[columnIndex + 1]?.pinned !== 'left'
borderBetweenColumns
? pinned === 'left' &&
lowHeaders[columnIndex + 1]?.pinned !== 'left'
: false
}
borderTop={!isSeparator && rowIndex !== 0}
borderTop={borderBetweenRows ? !isSeparator && rowIndex !== 0 : false}
ref={columnIndex === 0 ? ref : undefined}
row={row}
rowIndex={rowIndex}
Expand Down
36 changes: 19 additions & 17 deletions src/components/Table/__stand__/Table.dev.stand.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,22 +155,24 @@ type TableRowMouseEvent<ROW> = (
type GetRowKey<ROW> = (row: ROW) => string | number;
```

| Свойство | Тип | По умолчанию | Описание |
| ------------------ | ----------------------------- | ----------------- | ------------------------------------------------------------ |
| `columns?` | `TableColumn[]` | - | Колонки |
| `rows?` | `ROW[]` | - | Строки |
| `getRowKey?` | `GetRowKey<ROW>` | `(row) => row.id` | Функция получения ключа, если ключ не найден берется `index` |
| `onRowMouseEnter?` | `TableRowMouseEvent<ROW>` | - | Событие `onMouseEnter` на строке |
| `onRowMouseLeave?` | `TableRowMouseEvent<ROW>` | - | Событие `onMouseLeave` на строке |
| `onRowClick?` | `TableRowMouseEvent<ROW>` | - | Событие `onClick` на строке |
| `virtualScroll?` | `boolean` | - | Включение виртуальной прокрутки |
| `stickyHeader?` | `boolean` | - | Зафиксировать шапку сверху |
| `resizable?` | `'inside'` &#124; `'outside'` | - | Включение возможности изменять ширину колонок |
| `zebraStriped?` | `boolean` | - | Окрашивание строк через одну |
| `headerZIndex?` | `number` | `1` | `zIndex` шапки |
| `rowHoverEffect?` | `boolean` | - | Включает эффект наведения на строку |
| `className?` | `string` | - | Дополнительный CSS-класс |
| `ref?` | `React.Ref<HTMLDivElement>` | - | Ссылка на корневой DOM-элемент |
| Свойство | Тип | По умолчанию | Описание |
| -------------------- | ----------------------------- | ----------------- | ------------------------------------------------------------ |
| `columns?` | `TableColumn[]` | - | Колонки |
| `rows?` | `ROW[]` | - | Строки |
| `getRowKey?` | `GetRowKey<ROW>` | `(row) => row.id` | Функция получения ключа, если ключ не найден берется `index` |
| `onRowMouseEnter?` | `TableRowMouseEvent<ROW>` | - | Событие `onMouseEnter` на строке |
| `onRowMouseLeave?` | `TableRowMouseEvent<ROW>` | - | Событие `onMouseLeave` на строке |
| `onRowClick?` | `TableRowMouseEvent<ROW>` | - | Событие `onClick` на строке |
| `virtualScroll?` | `boolean` | - | Включение виртуальной прокрутки |
| `stickyHeader?` | `boolean` | - | Зафиксировать шапку сверху |
| `resizable?` | `'inside'` &#124; `'outside'` | - | Включение возможности изменять ширину колонок |
| `zebraStriped?` | `boolean` | - | Окрашивание строк через одну |
| `headerZIndex?` | `number` | `1` | `zIndex` шапки |
| `rowHoverEffect?` | `boolean` | - | Включает эффект наведения на строку |
| `className?` | `string` | - | Дополнительный CSS-класс |
| `ref?` | `React.Ref<HTMLDivElement>` | - | Ссылка на корневой DOM-элемент |
| `borderBetweenColumns?` | `boolean` | true | Отображение границ между колонками |
| `borderBetweenRows?` | `boolean` | true | Отображение границ между строками |

## Колонка

Expand Down Expand Up @@ -2041,7 +2043,7 @@ export const TableExampleRenderRow = () => {

## Состояние загрузки

Загрузку можно отобразить двумя видами с помощью `Loader` или `Skeleton.
Загрузку можно отобразить двумя видами с помощью `Loader` или `Skeleton`.

**Пример загрузки данных всей таблицы с помощью `Loader`:**

Expand Down
4 changes: 4 additions & 0 deletions src/components/Table/__stand__/Table.variants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -328,6 +330,8 @@ const Variants = () => {
stickyHeader={stickyHeader}
virtualScroll={virtualScrollProp}
style={{ maxHeight: '100%' }}
borderBetweenColumns={borderBetweenColumns}
borderBetweenRows={borderBetweenRows}
/>
</div>
);
Expand Down
6 changes: 6 additions & 0 deletions src/components/Table/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@ export type TableProps<ROW = TableDefaultRow> = PropsWithHTMLAttributesAndRef<
headerZIndex?: number;
rowHoverEffect?: boolean;
onScrollToBottom?: (length: number) => void;
borderBetweenColumns?: boolean;
borderBetweenRows?: boolean;
},
HTMLDivElement
>;
Expand All @@ -108,6 +110,8 @@ export type TableHeaderProps<ROW = TableDefaultRow> =
headerCellsRefsAtom: AtomMut<React.RefObject<HTMLDivElement>[]>;
bordersAtom: AtomMut<[boolean, boolean, boolean][]>;
tableRef: React.RefObject<HTMLDivElement>;
borderBetweenColumns?: boolean;
borderBetweenRows?: boolean;
},
HTMLDivElement
>;
Expand Down Expand Up @@ -169,6 +173,8 @@ export type TableDataProps<ROW = TableDefaultRow> =
rowHoverEffect?: boolean;
leftNoVisibleItemsAtom: AtomMut<number>;
rightNoVisibleItemsAtom: AtomMut<number>;
borderBetweenColumns?: boolean;
borderBetweenRows?: boolean;
},
HTMLDivElement
> & {
Expand Down
Loading