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

Lucas/t 295 fix checkbox column width (#261)

Browse Source 
* wip

* Fixed table and column width

* Use last resizable column instead of table width 100%

* Removed comments

* Fix lint

* Fixed table theme

* Removed left clickable margin

* Removed overflow

* Added table width
This commit is contained in:
Lucas Bordeau
2023-06-12 12:47:35 +02:00
committed by GitHub
parent 551cd00790
commit 05d22c1b06
8 changed files with 64 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/pages/people/__stories__/People.sortBy.stories.tsx
View File

@ -35,7 +35,7 @@ export const Email: Story = {
(await canvas.findAllByRole('checkbox')).map((item) => {
return item.getAttribute('id');
})[1],
).toStrictEqual('person-selected-7dfbc3f7-6e5e-4128-957e-8d86808cdf6b');
).toStrictEqual('checkbox-selected-7dfbc3f7-6e5e-4128-957e-8d86808cdf6b');
},
parameters: {
msw: graphqlMocks,

25
front/src/pages/people/people-columns.tsx
View File

@ -7,7 +7,7 @@ import {
TbPhone,
TbUser,
} from 'react-icons/tb';
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import { createColumnHelper } from '@tanstack/react-table';
import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
@ -16,34 +16,15 @@ import { updatePerson } from '@/people/services';
import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';
import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
const columnHelper = createColumnHelper<Person>();
export const usePeopleColumns = () => {
return useMemo(() => {
return [
{
id: 'select',
header: ({ table }: any) => (
<SelectAllCheckbox
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
/>
),
cell: (props: CellContext<Person, string>) => (
<CheckboxCell
id={`person-selected-${props.row.original.id}`}
name={`person-selected-${props.row.original.id}`}
checked={props.row.getIsSelected()}
onChange={(newValue) => props.row.toggleSelected(newValue)}
/>
),
size: 25,
},
getCheckBoxColumn(),
columnHelper.accessor('firstname', {
header: () => (
<ColumnHead viewName="People" viewIcon={<TbUser size={16} />} />