@@ -43,7 +43,6 @@ export default function DataGridDemo() {
e.stopPropagation()
onRowSelectionChange({
row,
- type: 'ROW',
checked: !isRowSelected,
isShiftClick: e.shiftKey,
})
diff --git a/apps/studio/components/grid/components/grid/AddColumn.tsx b/apps/studio/components/grid/components/grid/AddColumn.tsx
index 5cf1478412e..69c0a4dbef8 100644
--- a/apps/studio/components/grid/components/grid/AddColumn.tsx
+++ b/apps/studio/components/grid/components/grid/AddColumn.tsx
@@ -1,10 +1,10 @@
import { Plus } from 'lucide-react'
import type { CalculatedColumn } from 'react-data-grid'
-
-import { useTableEditorStateSnapshot } from 'state/table-editor'
import { Button } from 'ui'
+
import { ADD_COLUMN_KEY } from '../../constants'
import { DefaultFormatter } from '../formatter/DefaultFormatter'
+import { useTableEditorStateSnapshot } from '@/state/table-editor'
export const AddColumn: CalculatedColumn
= {
key: ADD_COLUMN_KEY,
@@ -15,7 +15,6 @@ export const AddColumn: CalculatedColumn = {
resizable: false,
sortable: false,
frozen: false,
- isLastFrozenColumn: false,
renderHeaderCell() {
return
},
diff --git a/apps/studio/components/grid/components/grid/Grid.tsx b/apps/studio/components/grid/components/grid/Grid.tsx
index 2079e3692ea..e15bca7e474 100644
--- a/apps/studio/components/grid/components/grid/Grid.tsx
+++ b/apps/studio/components/grid/components/grid/Grid.tsx
@@ -203,7 +203,7 @@ export const Grid = memo(
// Compute rowClass function to style pending add/delete rows
const computedRowClass = useMemo(() => {
return (row: SupaRow) => {
- const classes: string[] = []
+ const classes: string[] = ['[&>.rdg-cell]:flex', '[&>.rdg-cell]:items-center']
// Call the original rowClass if provided
if (rowClass) {
diff --git a/apps/studio/components/grid/components/grid/SelectColumn.tsx b/apps/studio/components/grid/components/grid/SelectColumn.tsx
index 0e07057b921..8596cc65772 100644
--- a/apps/studio/components/grid/components/grid/SelectColumn.tsx
+++ b/apps/studio/components/grid/components/grid/SelectColumn.tsx
@@ -5,14 +5,15 @@ import {
RenderCellProps,
RenderGroupCellProps,
RenderHeaderCellProps,
+ useHeaderRowSelection,
useRowSelection,
} from 'react-data-grid'
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { useTableEditorStateSnapshot } from 'state/table-editor'
-import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
import { SELECT_COLUMN_KEY } from '../../constants'
import type { SupaRow } from '../../types'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { useTableEditorStateSnapshot } from '@/state/table-editor'
+import { useTableEditorTableStateSnapshot } from '@/state/table-editor-table'
export const SelectColumn: CalculatedColumn = {
key: SELECT_COLUMN_KEY,
@@ -23,25 +24,24 @@ export const SelectColumn: CalculatedColumn = {
resizable: false,
sortable: false,
frozen: true,
- isLastFrozenColumn: false,
renderHeaderCell: (props: RenderHeaderCellProps) => {
// [Joshen] formatter is actually a valid React component, so we can use hooks here
// eslint-disable-next-line react-hooks/rules-of-hooks
- const [isRowSelected, onRowSelectionChange] = useRowSelection()
+ const { isRowSelected, onRowSelectionChange } = useHeaderRowSelection()
return (
onRowSelectionChange({ type: 'HEADER', checked })}
+ onChange={(checked) => onRowSelectionChange({ checked })}
/>
)
},
renderCell: (props: RenderCellProps) => {
// [Alaister] formatter is actually a valid React component, so we can use hooks here
// eslint-disable-next-line react-hooks/rules-of-hooks
- const [isRowSelected, onRowSelectionChange] = useRowSelection()
+ const { isRowSelected, onRowSelectionChange } = useRowSelection()
return (
= {
value={isRowSelected}
row={props.row}
onChange={(checked, isShiftClick) => {
- onRowSelectionChange({ type: 'ROW', row: props.row, checked, isShiftClick })
+ onRowSelectionChange({ row: props.row, checked, isShiftClick })
}}
// Stop propagation to prevent row selection
onClick={stopPropagation}
@@ -59,7 +59,7 @@ export const SelectColumn: CalculatedColumn = {
renderGroupCell: (props: RenderGroupCellProps) => {
// [Alaister] groupFormatter is actually a valid React component, so we can use hooks here
// eslint-disable-next-line react-hooks/rules-of-hooks
- const [isRowSelected, onRowSelectionChange] = useRowSelection()
+ const { isRowSelected, onRowSelectionChange } = useRowSelection()
return (
= {
value={isRowSelected}
onChange={(checked) => {
onRowSelectionChange({
- type: 'ROW',
row: props.row,
checked,
isShiftClick: false,
diff --git a/apps/studio/components/grid/utils/gridColumns.tsx b/apps/studio/components/grid/utils/gridColumns.tsx
index 064f055ec3b..54d50cdc72b 100644
--- a/apps/studio/components/grid/utils/gridColumns.tsx
+++ b/apps/studio/components/grid/utils/gridColumns.tsx
@@ -1,4 +1,3 @@
-import { COLUMN_MIN_WIDTH } from 'components/grid/constants'
import { CalculatedColumn, RenderCellProps } from 'react-data-grid'
import { DefaultValue } from '../components/common/DefaultValue'
@@ -39,6 +38,7 @@ import {
isTextColumn,
isTimeColumn,
} from './types'
+import { COLUMN_MIN_WIDTH } from '@/components/grid/constants'
export const ESTIMATED_CHARACTER_PIXEL_WIDTH = 9
@@ -73,7 +73,6 @@ export function getGridColumns(
width: columnWidth,
minWidth: COLUMN_MIN_WIDTH,
frozen: false,
- isLastFrozenColumn: false,
renderHeaderCell: (props) => (
{
// This is actually a valid React component, so we can use hooks here
// eslint-disable-next-line react-hooks/rules-of-hooks
- const [isRowSelected, onRowSelectionChange] = useRowSelection()
+ const { isRowSelected, onRowSelectionChange } = useRowSelection()
const value = row?.[col.id]
const user = users?.find((u) => u.id === row.id)
@@ -329,7 +329,6 @@ export const formatUserColumns = ({
e.stopPropagation()
onRowSelectionChange({
row,
- type: 'ROW',
checked: !isRowSelected,
isShiftClick: e.shiftKey,
})
diff --git a/apps/studio/components/interfaces/Auth/Users/UsersGridComponents.tsx b/apps/studio/components/interfaces/Auth/Users/UsersGridComponents.tsx
index 13a085c76ff..67d4b04fb27 100644
--- a/apps/studio/components/interfaces/Auth/Users/UsersGridComponents.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UsersGridComponents.tsx
@@ -1,6 +1,6 @@
import { ChevronDown, SortAsc, SortDesc } from 'lucide-react'
import { useEffect, useRef, useState } from 'react'
-import { useRowSelection } from 'react-data-grid'
+import { useHeaderRowSelection } from 'react-data-grid'
import {
Button,
DropdownMenu,
@@ -18,7 +18,7 @@ export const SelectHeaderCell = ({
allRowsSelected: boolean
}) => {
const inputRef = useRef(null)
- const [isRowSelected, onRowSelectionChange] = useRowSelection()
+ const { isRowSelected, onRowSelectionChange } = useHeaderRowSelection()
const isIndeterminate = selectedUsers.size > 0 && !allRowsSelected
@@ -36,7 +36,7 @@ export const SelectHeaderCell = ({
className="sb-grid-select-cell__header__input"
disabled={false}
checked={isRowSelected}
- onChange={(e) => onRowSelectionChange({ type: 'HEADER', checked: e.target.checked })}
+ onChange={(e) => onRowSelectionChange({ checked: e.target.checked })}
/>