diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss index 27de484..32f9312 100644 --- a/src/components/Table/Table.scss +++ b/src/components/Table/Table.scss @@ -16,10 +16,20 @@ $block: '.#{variables.$ns}styled-table'; @include mixins.text-subheader-1(); } + &_size { + &_s { + --_--cell-padding: 7px var(--g-spacing-2) 6px; + } + + &_m { + --_--cell-padding: 11px var(--g-spacing-2) 10px; + } + } + &__cell, &__header-cell, &__footer-cell { - padding: 11px var(--g-spacing-2) 10px; + padding: var(--_--cell-padding); border-block-end: 1px solid var(--g-color-line-generic); } } diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index f16092d..fb5c82e 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -4,11 +4,15 @@ import {BaseTable} from '../BaseTable'; import type {BaseTableProps} from '../BaseTable'; import {b} from './Table.classname'; +import type {TableSize} from './types'; import './Table.scss'; export interface TableProps - extends BaseTableProps {} + extends BaseTableProps { + /** Table size */ + size?: TableSize; +} export const Table = React.forwardRef( ( @@ -18,6 +22,7 @@ export const Table = React.forwardRef( footerCellClassName: footerCellClassNameProp, headerCellClassName: headerCellClassNameProp, headerClassName, + size = 'm', ...props }: TableProps, ref: React.Ref, @@ -49,7 +54,7 @@ export const Table = React.forwardRef( return ( = { render: DefaultStory, }; +export const SizeS: StoryObj = { + render: SizeSStory, +}; + export const WithSelection: StoryObj = { render: WithSelectionStory, }; diff --git a/src/components/Table/__stories__/stories/SizeSStory.tsx b/src/components/Table/__stories__/stories/SizeSStory.tsx new file mode 100644 index 0000000..e391bc2 --- /dev/null +++ b/src/components/Table/__stories__/stories/SizeSStory.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import {useTable} from '../../../../hooks'; +import {columns} from '../../../BaseTable/__stories__/constants/columns'; +import {data} from '../../../BaseTable/__stories__/constants/data'; +import {Table} from '../../index'; + +export const SizeSStory = () => { + const table = useTable({ + columns, + data, + }); + + return ; +}; diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts index 75193ad..73057c4 100644 --- a/src/components/Table/index.ts +++ b/src/components/Table/index.ts @@ -1 +1,2 @@ export * from './Table'; +export * from './types'; diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts new file mode 100644 index 0000000..93a2676 --- /dev/null +++ b/src/components/Table/types.ts @@ -0,0 +1 @@ +export type TableSize = 's' | 'm';