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

[Issue-5772] Add sort feature on settings tables (#5787)

Browse Source 
## Proposed Changes
-  Introduce  a new custom hook - useTableSort to sort table content
-  Add test cases for the new custom hook
- Integrate useTableSort hook on to the table in settings object and
settings object field pages

## Related Issue

https://github.com/twentyhq/twenty/issues/5772

## Evidence


https://github.com/twentyhq/twenty/assets/87609792/8be456ce-2fa5-44ec-8bbd-70fb6c8fdb30

## Evidence after addressing review comments


https://github.com/twentyhq/twenty/assets/87609792/c267e3da-72f9-4c0e-8c94-a38122d6395e

## Further comments

Apologies for the large PR. Looking forward for the review

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Anand Krishnan M J
2024-08-14 20:41:17 +05:30
committed by GitHub
parent 0f75e14ab2
commit 59e14fabb4
40 changed files with 1229 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx
View File

@ -1,6 +1,6 @@
import { useMemo } from 'react';
import { Table } from '@/spreadsheet-import/components/Table';
import { SpreadsheetImportTable } from '@/spreadsheet-import/components/SpreadsheetImportTable';
import { ImportedRow } from '@/spreadsheet-import/types';
import { generateSelectionColumns } from './SelectColumn';
@ -22,7 +22,7 @@ export const SelectHeaderTable = ({
);
return (
<Table
<SpreadsheetImportTable
// Todo: remove usage of react-data-grid
rowKeyGetter={(row: any) => importedRows.indexOf(row)}
rows={importedRows}

10
packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/ExampleTable.tsx
View File

@ -1,6 +1,6 @@
import { useMemo } from 'react';
import { Table } from '@/spreadsheet-import/components/Table';
import { SpreadsheetImportTable } from '@/spreadsheet-import/components/SpreadsheetImportTable';
import { Fields } from '@/spreadsheet-import/types';
import { generateExampleRow } from '@/spreadsheet-import/utils/generateExampleRow';
@ -16,5 +16,11 @@ export const ExampleTable = <T extends string>({
const data = useMemo(() => generateExampleRow(fields), [fields]);
const columns = useMemo(() => generateColumns(fields), [fields]);
return <Table rows={data} columns={columns} className={'rdg-example'} />;
return (
<SpreadsheetImportTable
rows={data}
columns={columns}
className={'rdg-example'}
/>
);
};

4
packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
View File

@ -5,8 +5,8 @@ import { RowsChangeData } from 'react-data-grid';
import { IconTrash } from 'twenty-ui';
import { Heading } from '@/spreadsheet-import/components/Heading';
import { SpreadsheetImportTable } from '@/spreadsheet-import/components/SpreadsheetImportTable';
import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
import { Table } from '@/spreadsheet-import/components/Table';
import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
import {
Columns,
@ -277,7 +277,7 @@ export const ValidationStep = <T extends string>({
/>
</StyledToolbar>
<StyledScrollContainer>
<Table
<SpreadsheetImportTable
rowKeyGetter={rowKeyGetter}
rows={tableData}
onRowsChange={updateRow}