admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: prevent empty state from scrolling in table view (#12197)

Browse Source 
https://github.com/user-attachments/assets/334ffd15-a639-4947-8142-c19bc231c9bd



Closes #12132
This commit is contained in:
Abdul Rahman
2025-05-22 15:29:32 +05:30
committed by GitHub
parent 1365c202d9
commit c6627f1e99
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
View File

@ -68,10 +68,7 @@ export const RecordTable = () => {
<RecordTableScrollToFocusedCellEffect /> <RecordTableScrollToFocusedCellEffect />
<RecordTableScrollToFocusedRowEffect /> <RecordTableScrollToFocusedRowEffect />
{recordTableIsEmpty && !hasRecordGroups ? ( {recordTableIsEmpty && !hasRecordGroups ? (
<RecordTableEmpty <RecordTableEmpty tableBodyRef={tableBodyRef} />
tableBodyRef={tableBodyRef}
hasRecordGroups={hasRecordGroups}
/>
) : ( ) : (
<RecordTableContent <RecordTableContent
tableBodyRef={tableBodyRef} tableBodyRef={tableBodyRef}

11
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmpty.tsx
View File

@ -1,17 +1,22 @@
import { StyledTable } from '@/object-record/record-table/components/RecordTableStyles'; import { StyledTable } from '@/object-record/record-table/components/RecordTableStyles';
import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState'; import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState';
import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader'; import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
import styled from '@emotion/styled';
const StyledEmptyStateContainer = styled.div`
height: 100%;
overflow: hidden;
`;
export interface RecordTableEmptyProps { export interface RecordTableEmptyProps {
tableBodyRef: React.RefObject<HTMLTableElement>; tableBodyRef: React.RefObject<HTMLTableElement>;
hasRecordGroups: boolean;
} }
export const RecordTableEmpty = ({ tableBodyRef }: RecordTableEmptyProps) => ( export const RecordTableEmpty = ({ tableBodyRef }: RecordTableEmptyProps) => (
<> <StyledEmptyStateContainer>
<StyledTable ref={tableBodyRef}> <StyledTable ref={tableBodyRef}>
<RecordTableHeader /> <RecordTableHeader />
</StyledTable> </StyledTable>
<RecordTableEmptyState /> <RecordTableEmptyState />
</> </StyledEmptyStateContainer>
); );