Is it supported to use customize table cell in the table component provided by react-aria-components?

[CurryYangxx]

I want to add some editable elements such as input and provide more interactions in the table cell. So I want to customize a table cell.

Is it possible like this? And I don't know how to get the cell and state which are needed in MyTableCell props.

const MyTableCell = ({ cell, state }) => {
  const ref = useRef<HTMLTableCellElement | null>(null);
  const { gridCellProps } = useTableCell({ node: cell }, state, ref);
  const { isFocusVisible, focusProps } = useFocusRing();

  return (
    <td
      {...mergeProps(gridCellProps, focusProps)}
      style={{
        padding: '5px 10px',
        outline: 'none',
        boxShadow: isFocusVisible ? 'inset 0 0 0 2px orange' : 'none',
      }}
      ref={ref}
    >
      {cell.rendered}
    </td>
  );
};

<Table
  aria-label="Example static collection table"
  style={{ height: '210px', maxWidth: '400px' }}
>
  <TableHeader>
    <Column>Name</Column>
    <Column>Type</Column>
    <Column>Date Modified</Column>
  </TableHeader>
  <TableBody>
    <Row>
      <Cell>Games</Cell>
      <Cell>File folder</Cell>
      <MyTableCell>{element}</MyTableCell>
    </Row>
  </TableBody>
</Table>

[snowystinger]

To create your own Cell, you'd need to reimplement

react-spectrum/packages/react-aria-components/src/Table.tsx

Line 1206 in 148fcf1

export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, cell: GridNode<unknown>) => {

However, I think this would be easier if you kept using our Cell, because the thing that you want to change isn't the element that is rendered. You can just wrap the children of whatever your CustomCell is.
I'd be careful doing this as well though, because if you start intercepting events that we rely on, you could easily create a degraded and inaccessible experience.

The best thing to do would be to make use of the work going on for Grid Edit Mode. Then render any extra interactive children into the cell as needed.
feat: nested collection support you'd use GridList to implement your table instead, and use keyboardNavigationBehavior="tab" https://react-spectrum.adobe.com/react-aria/GridList.html#gridlist-1 so users can tab into the contents of the cell and use interactive components in there.

We'll eventually have more support for Edit mode, and it'll likely extend to Table as well, but this should be enough to get you started.

For a more complete list of issues associated with Edit mode, see feat: Add support for grid edit mode w/ nested interactive widgets

[vladinator1000]

you'd need to reimplement

react-spectrum/packages/react-aria-components/src/Table.tsx

Line 1206 in 148fcf1

export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, cell: GridNode<unknown>) => {

@snowystinger createLeafComponent, useRenderProps, useElementType and filterDOMProps are private. Are they necessary prerequisites for a user-made editable cell? I'm asking with hope to find a reasonable approach while waiting for official editable table support.

Module '"react-aria"' has no exported member 'createLeafComponent'

Right now I'm hacking it like this

import { useState } from 'react'
import { Cell as AriaCell, CellProps } from 'react-aria-components'
import Input from '../forms/Input'
import { style } from './Cell'

interface EditableCellProps extends CellProps {
  initial: string | number
  onChange?: (newValue: string, id: string) => void
  id: string
}

export function EditableCell({
  id,
  initial,
  onChange,
  ...props
}: EditableCellProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [value, setValue] = useState(String(initial))

  return (
    <AriaCell css={style} {...props}>
      <div
        onClick={() => {
          setIsEditing(true)
        }}
      >
        {isEditing ? (
          <Input
            autoFocus
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onBlur={() => {
              setIsEditing(false)
              if (onChange && value !== String(initial)) {
                onChange(value, id)
              }
            }}
          />
        ) : (
          value
        )}
      </div>
    </AriaCell>
  )
}

[snowystinger]

Not private, just still in a prerelease state to some extent

react-spectrum/packages/react-aria-components/src/index.ts

Line 48 in 631eb85

export {Collection, createLeafComponent as UNSTABLE_createLeafComponent, createBranchComponent as UNSTABLE_createBranchComponent, CollectionBuilder as UNSTABLE_CollectionBuilder} from '@react-aria/collections';

What you're doing isn't so much a hack, that's a decent way to start on this. However, you'll want to think of keyboard users and assistive technology users as well.

Eventually, we aim to support this use case of editable cells, but there is more work that needs to be done for that. I'm sure you're finding there are a number of edge cases to supporting it.

For now, I think it'd be better to keep the input always around and use the keyboardNavigationBehavior="tab". You can make the input styled to be borderless/quiet/etc when you don't have focus in it, and look more like an input when you do.

[simen-ardoq]

We're also trying to add something as simple as align support to Column that we later read using TableContext in Cell. It would be nice if there was some way to add attributes/classes to the component without having to copy so much internal boilerplate.

[snowystinger]

you shouldn't need to copy internal boilerplate, can you share how you're thinking about this?

you should just be able to use Reusable Wrappers for the Cell https://react-spectrum.adobe.com/react-aria/Table.html#reusable-wrappers

like so:

react-spectrum/packages/@react-spectrum/s2/src/TableView.tsx

Line 981 in 9723225

textAlign: {

react-spectrum/packages/@react-spectrum/s2/src/TableView.tsx

Line 1036 in 9723225

<span className={cellContent({...tableVisualOptions, isSticky, align: align || 'start'})}>{children}</span>

[simen-ardoq]

Consider the following pseudo-code example:

<Table>
  <Header>
    <Column>Name</Column>
    <Column align="end">Age</Column>
  </Header>
  <Row>
    <Cell>John</Cell>
    <Cell>30</Cell>
  </Row>
  <Row>
    <Cell>Jane</Cell>
    <Cell>25</Cell>
  </Row>
</Table>

Notice how "align" is applied to the column, not the cell. This means I have to find the column, and then apply the align prop to the cell:

type ColumnAlign = 'start' | 'center' | 'end';
type MyColumnProps = ColumnProps & {
    align?: ColumnAlign;
}

const MyColumn = (props: MyColumnProps) => {
  // I need to get the current cell (index) somehow so I can do column.props.align
  // const cell = useTableCellContext()
  const state = useTableStateContext();
  const column = state.collection.columns[cell.index];

  return <Column {...props} data-align={column.props.align} />;
};

[snowystinger]

Ah, for statically defined tables, yes, this would be harder since columns are defined away from cells and cells may span multiple columns.

If you use the dynamic rendering, then you can have access to column props for each cell, see https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/stories/TableView.stories.tsx#L387

I'm not sure why Cell doesn't have renderProps with the cell's node, maybe we could expose that to help with this some more

[simen-ardoq]

We'll create a PR for exposing the cell's node.