-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3a7499d
commit 6c4ec55
Showing
13 changed files
with
563 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| ## Table Component | ||
|
|
||
| ### Table props: | ||
|
|
||
| #### `data` (RowData[]) | ||
|
|
||
| An array of objects representing the data to be displayed in the table. Each object should have properties corresponding to the columns of the table. | ||
|
|
||
| The `RowData` interface allows for flexibility in defining each row of data. It consists of the following properties: | ||
|
|
||
| - `[key: string]`: The key-value pairs representing the data for each column in the table. The keys should match the keys of the columns specified in the `primaryColumn` and `fixedColumns` props. | ||
| - `detailedCellData` _(optional)_: An object containing detailed data for the cell, including content for sorting and a React component for rendering. | ||
| - `content` _(string | number)_: The content of the cell for sorting purposes. | ||
| - `component` _(ReactNode)_: A React component to render in the cell. | ||
| - `rowConfigs` _(optional)_: An object containing configuration options for the row, such as its size. | ||
| - `size` _(optional)_: The size of the row, which can be 'small', 'default', or 'large'. | ||
|
|
||
| #### `primaryColumn` (PrimaryColumn) | ||
|
|
||
| Specifies the primary column of the table. It should be an object with the following properties: | ||
|
|
||
| - `key` _(string)_: The unique key of the primary column. | ||
| - `header` _(string)_: The header text of the primary column. | ||
|
|
||
| #### `fixedColumns` (FixedColumn[]) | ||
|
|
||
| An array of objects representing the fixed columns of the table. Each object should have the following properties: | ||
|
|
||
| - `key` _(string)_: The unique key of the column. | ||
| - `header` _(string)_: The header text of the column. | ||
| - `width` _(number)_: The width of the column in pixels. | ||
| - `order` _(number)_: The order of the column. | ||
| - `align` _(optional, string)_: The alignment of the column content ('left', 'center', 'right'). | ||
|
|
||
| #### `rowActionMenu` (ReactNode, optional) | ||
|
|
||
| A custom action menu to be displayed for each row in the table. It can be any valid ReactNode. | ||
|
|
||
| #### `selectable` (boolean, optional) | ||
|
|
||
| Indicates whether row selection using checkboxes is enabled. Set to true to enable checkbox selection. | ||
|
|
||
| #### `className` (string, optional) | ||
|
|
||
| Additional CSS classes to be applied to the table. | ||
|
|
||
| #### `selectedRowIds` ((string | number)[], optional) | ||
| An array containing the IDs of the currently selected rows. | ||
|
|
||
| #### `sortingDirection` (SortDirection, optional) | ||
| Specifies the current sorting direction ('asc' or 'desc'). | ||
|
|
||
| #### `sortingColumn` (Column, optional) | ||
| Specifies the column by which the table is currently sorted. | ||
|
|
||
| #### `onChangeSorting` ((sortConfig?: SortConfig) => void, optional) | ||
| Callback function triggered when the sorting configuration changes. | ||
|
|
||
| #### `onToggleRowSelection` ((id: string | number) => void, optional) | ||
| Callback function triggered when a row's selection state changes. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { Table } from './table'; | ||
|
|
||
| export { Table }; | ||
|
|
||
| export default Table; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| @import 'src/assets/styles/variables/typography'; | ||
|
|
||
| $HEIGHT-SMALL: 44px; | ||
| $HEIGHT-DEFAULT: 64px; | ||
| $HEIGHT-LARGE: 80px; | ||
|
|
||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .table { | ||
| width: 100%; | ||
| max-width: 1200px; | ||
|
|
||
| } | ||
|
|
||
| .table-header { | ||
| display: flex; | ||
| width: 100%; | ||
| height: 32px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .table-row { | ||
| display: flex; | ||
| width: 100%; | ||
| height: $HEIGHT-DEFAULT; | ||
|
|
||
| .table-row-content { | ||
| display: flex; | ||
| align-items: center; | ||
| height: 100%; | ||
| flex: 1; | ||
| box-shadow: var(--rp-ui-base-shadow-hover); | ||
| background-color: var(--rp-ui-base-bg-000); | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| &.size-small { | ||
| height: $HEIGHT-SMALL; | ||
| } | ||
|
|
||
| &.size-large { | ||
| height: $HEIGHT-LARGE; | ||
| } | ||
|
|
||
| &:hover { | ||
| color: var(--rp-ui-base-topaz-hover); | ||
| } | ||
| } | ||
|
|
||
| .table-body { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 4px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .table-header-cell, .table-cell { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| font-family: var(--rp-ui-base-font-family); | ||
| font-weight: $fw-regular; | ||
| padding: 0 16px; | ||
|
|
||
| &.action-menu-cell { | ||
| width: 48px; | ||
| padding: 0 16px; | ||
| } | ||
|
|
||
| &.checkbox-cell{ | ||
| width: 48px; | ||
| display: flex; | ||
| justify-content: center; | ||
| height: 100%; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| &.primary-cell { | ||
| flex: 1 0 320px; | ||
| font-weight: $fw-medium; | ||
| text-align: left; | ||
| } | ||
| } | ||
|
|
||
| .table-header-cell { | ||
| font-size: 11px; | ||
| line-height: 16px; | ||
| color: var(--rp-ui-base-e-400); | ||
| display: flex; | ||
| align-items: center; | ||
| text-align: left; | ||
| background: none; | ||
| border: none; | ||
| cursor: pointer; | ||
|
|
||
| &.align-right { | ||
| justify-content: flex-end; | ||
|
|
||
| svg { | ||
| margin-right: -16px; | ||
| } | ||
| } | ||
|
|
||
| &.align-center { | ||
| justify-content: center; | ||
| } | ||
| } | ||
|
|
||
| .table-cell { | ||
| font-size: 13px; | ||
| line-height: 20px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { Table } from './table'; | ||
| import { Popover } from '@components/popover'; | ||
| import { MeatballMenuIcon } from '@components/icons'; | ||
| import { TableComponentProps, RowData, FixedColumn, Column, SortDirection } from './types'; | ||
| import { useState } from 'react'; | ||
| import { sortTableData } from '@components/table/utils'; | ||
|
|
||
| const meta: Meta<typeof Table> = { | ||
| title: 'Table', | ||
| component: Table, | ||
| parameters: { | ||
| layout: 'centered', | ||
| }, | ||
| tags: ['autodocs'], | ||
| args: { | ||
| selectable: true, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<TableComponentProps>; | ||
|
|
||
| const rowActionMenu = ( | ||
| <Popover | ||
| placement={'bottom-end'} | ||
| content={ | ||
| <div> | ||
| <p>Edit</p> | ||
| <p>Rename</p> | ||
| </div> | ||
| } | ||
| > | ||
| <MeatballMenuIcon /> | ||
| </Popover> | ||
| ); | ||
|
|
||
| const data: RowData[] = [ | ||
| { | ||
| id: 1, | ||
| name: { | ||
| content: 'Sam', | ||
| component: ( | ||
| <a | ||
| href={'https://example.com/profile/sam'} | ||
| style={{ color: 'inherit', textDecoration: 'none' }} | ||
| > | ||
| Sam | ||
| </a> | ||
| ), | ||
| }, | ||
| age: 25, | ||
| city: 'New York', | ||
| }, | ||
| { name: 'Anna', age: 3, city: 'New York1', id: 2 }, | ||
| { name: 'Mike', age: 30, city: 'Los Angeles', config: { size: 'small' }, id: 3 }, | ||
| ]; | ||
|
|
||
| const primaryColumn: Column = { | ||
| key: 'name', | ||
| header: 'Name', | ||
| }; | ||
|
|
||
| const fixedColumns: FixedColumn[] = [ | ||
| { | ||
| key: 'age', | ||
| header: 'Age', | ||
| order: 3, | ||
| align: 'right', | ||
| width: 100, | ||
| }, | ||
| { | ||
| key: 'city', | ||
| header: 'City', | ||
| order: 2, | ||
| width: 150, | ||
| }, | ||
| ]; | ||
|
|
||
| export const Default: Story = { | ||
| render: (args: TableComponentProps) => { | ||
| const defaultSortedData = sortTableData(data, { | ||
| key: primaryColumn.key, | ||
| direction: SortDirection.ASC, | ||
| }); | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const [tableData, setTableData] = useState(defaultSortedData); | ||
| return ( | ||
| <div style={{ minWidth: '700px' }}> | ||
| <Table | ||
| {...args} | ||
| data={tableData} | ||
| onChangeSorting={(sortConfig) => { | ||
| const sortedData = sortTableData(tableData, sortConfig); | ||
| setTableData(sortedData); | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| }, | ||
| args: { | ||
| primaryColumn, | ||
| fixedColumns, | ||
| rowActionMenu, | ||
| selectable: true, | ||
| }, | ||
| }; |
Oops, something went wrong.