-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: order multiple spectra analysis table (#1887)
* refactor: react-table header icon and fix style * feat: order multiple spectra analysis table close #1876 * fix: serial number column * refactor: cast formatted string to number * refactor: react table * fix: multiple spectra analysis sorting * test: fix peaks test to look for a number and not a string * fix: format hook * refactor: stop event propagation for delete button * fix: peak pointer shift * feat: add onSortEnd event to react-table * feat: reorder spectra and columns in multi-spectra analysis reorder spectra based on the columns ordered in multi-spectra analysis enable/disable spectra reorder from multi-spectra analysis preferences, by default it's enabled close #1876
- Loading branch information
1 parent
c04d6df
commit 9f90f13
Showing
32 changed files
with
501 additions
and
342 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
90 changes: 67 additions & 23 deletions
90
src/component/elements/ReactTable/Elements/ReactTableHeader.tsx
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 |
|---|---|---|
| @@ -1,33 +1,77 @@ | ||
| import { memo } from 'react'; | ||
| import { CSSProperties, MouseEvent } from 'react'; | ||
| import { FaSortAmountDown, FaSortAmountUp } from 'react-icons/fa'; | ||
|
|
||
| interface ReactTableHeaderProps { | ||
| interface TableCellEvent { | ||
| onClick: (e: MouseEvent<HTMLTableCellElement>) => void; | ||
| } | ||
| interface ReactTableHeaderProps extends TableCellEvent { | ||
| headerGroups: any; | ||
| } | ||
|
|
||
| function ReactTableHeader({ headerGroups }: ReactTableHeaderProps) { | ||
| const sortIconStyle: CSSProperties = { | ||
| position: 'absolute', | ||
| top: '50%', | ||
| transform: 'translateY(-50%)', | ||
| left: '2px', | ||
| }; | ||
|
|
||
| function ReactTableHeader({ headerGroups, onClick }: ReactTableHeaderProps) { | ||
| return ( | ||
| <thead> | ||
| {headerGroups.map((headerGroup) => ( | ||
| <tr | ||
| key={headerGroup.getHeaderGroupProps().key} | ||
| {...headerGroup.getHeaderGroupProps()} | ||
| > | ||
| {headerGroup.headers.map((column) => ( | ||
| <th | ||
| key={column.getHeaderProps().key} | ||
| {...column.getHeaderProps(column.getSortByToggleProps())} | ||
| style={column.style} | ||
| > | ||
| {column.render('Header')} | ||
| <span> | ||
| {column.isSorted ? (column.isSortedDesc ? ' ▼' : ' ▲') : ''} | ||
| </span> | ||
| </th> | ||
| ))} | ||
| </tr> | ||
| ))} | ||
| {headerGroups.map((headerGroup) => { | ||
| const { key: headerGroupKey, ...restHeaderGroupProps } = | ||
| headerGroup.getHeaderGroupProps(); | ||
| return ( | ||
| <tr key={headerGroupKey} {...restHeaderGroupProps}> | ||
| {headerGroup.headers.map((column) => ( | ||
| <HeaderCell key={column.key} column={column} onClick={onClick} /> | ||
| ))} | ||
| </tr> | ||
| ); | ||
| })} | ||
| </thead> | ||
| ); | ||
| } | ||
|
|
||
| export default memo(ReactTableHeader); | ||
| interface HeaderCellProps extends TableCellEvent { | ||
| column: any; | ||
| } | ||
|
|
||
| const HeaderCell = (props: HeaderCellProps) => { | ||
| const { column } = props; | ||
| const { | ||
| key: headerKey, | ||
| style: headerStyle, | ||
| onClick, | ||
| ...restHeaderProps | ||
| } = column.getHeaderProps(column.getSortByToggleProps()); | ||
| function clickHandler(e: MouseEvent<HTMLTableCellElement>) { | ||
| if (onClick) { | ||
| onClick(e); | ||
| props.onClick(e); | ||
| } | ||
| } | ||
| return ( | ||
| <th | ||
| key={headerKey} | ||
| {...restHeaderProps} | ||
| style={{ ...headerStyle, ...column.style, height: '1px' }} | ||
| onClick={clickHandler} | ||
| > | ||
| <span style={sortIconStyle}> | ||
| {column.isSorted ? ( | ||
| column.isSortedDesc ? ( | ||
| <FaSortAmountDown /> | ||
| ) : ( | ||
| <FaSortAmountUp /> | ||
| ) | ||
| ) : ( | ||
| '' | ||
| )} | ||
| </span> | ||
| {column.render('Header') && column.render('Header')} | ||
| </th> | ||
| ); | ||
| }; | ||
|
|
||
| export default ReactTableHeader; |
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
Oops, something went wrong.