mirror of
https://github.com/twentyhq/twenty.git
synced 2024-10-04 12:57:10 +03:00
Improve performance on TableBody but disable shadow on first column freeze
This commit is contained in:
parent
c402631067
commit
c42fcf435a
@ -1,6 +1,5 @@
|
||||
import { css } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { RecordTableBody } from '@/object-record/record-table/components/RecordTableBody';
|
||||
@ -23,12 +22,9 @@ import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocus
|
||||
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
|
||||
import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
|
||||
|
||||
const StyledTable = styled.table<{
|
||||
freezeFirstColumns?: boolean;
|
||||
freezeHeaders?: boolean;
|
||||
}>`
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
border-spacing: 0;
|
||||
@ -150,8 +146,6 @@ export const RecordTable = ({
|
||||
createRecord,
|
||||
}: RecordTableProps) => {
|
||||
const { scopeId } = useRecordTableStates(recordTableId);
|
||||
const scrollLeft = useRecoilValue(scrollLeftState);
|
||||
const scrollTop = useRecoilValue(scrollTopState);
|
||||
|
||||
const { objectMetadataItem } = useObjectMetadataItem({
|
||||
objectNameSingular,
|
||||
@ -228,11 +222,7 @@ export const RecordTable = ({
|
||||
onCellMouseEnter: handleContainerMouseEnter,
|
||||
}}
|
||||
>
|
||||
<StyledTable
|
||||
freezeFirstColumns={scrollLeft > 0}
|
||||
freezeHeaders={scrollTop > 0}
|
||||
className="entity-table-cell"
|
||||
>
|
||||
<StyledTable className="entity-table-cell">
|
||||
<RecordTableHeader createRecord={createRecord} />
|
||||
<RecordTableBodyEffect objectNameSingular={objectNameSingular} />
|
||||
<RecordTableBody objectNameSingular={objectNameSingular} />
|
||||
|
@ -33,7 +33,9 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => {
|
||||
const scrollWrapperRef = useContext(ScrollWrapperContext);
|
||||
|
||||
const { ref: elementRef, inView } = useInView({
|
||||
root: scrollWrapperRef.current,
|
||||
root: scrollWrapperRef.current?.querySelector(
|
||||
'[data-overlayscrollbars-viewport="scrollbarHidden"]',
|
||||
),
|
||||
rootMargin: '1000px',
|
||||
});
|
||||
|
||||
@ -58,21 +60,21 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => {
|
||||
<StyledTd>
|
||||
<CheckboxCell />
|
||||
</StyledTd>
|
||||
{visibleTableColumns.map((column, columnIndex) =>
|
||||
inView ? (
|
||||
<RecordTableCellContext.Provider
|
||||
value={{
|
||||
columnDefinition: column,
|
||||
columnIndex,
|
||||
}}
|
||||
key={column.fieldMetadataId}
|
||||
>
|
||||
<RecordTableCellFieldContextWrapper />
|
||||
</RecordTableCellContext.Provider>
|
||||
) : (
|
||||
<td key={column.fieldMetadataId}></td>
|
||||
),
|
||||
)}
|
||||
{inView
|
||||
? visibleTableColumns.map((column, columnIndex) => (
|
||||
<RecordTableCellContext.Provider
|
||||
value={{
|
||||
columnDefinition: column,
|
||||
columnIndex,
|
||||
}}
|
||||
key={column.fieldMetadataId}
|
||||
>
|
||||
<RecordTableCellFieldContextWrapper />
|
||||
</RecordTableCellContext.Provider>
|
||||
))
|
||||
: visibleTableColumns.map((column, columnIndex) => (
|
||||
<td key={column.fieldMetadataId}></td>
|
||||
))}
|
||||
<td></td>
|
||||
</tr>
|
||||
</RecordTableRowContext.Provider>
|
||||
|
Loading…
Reference in New Issue
Block a user