0

I want to make an editable row for my table. I understand what props are but I'm unsure on what rowData is in this case. It's not given a value when the cell is declared. This example is taken from the React Suite website: https://rsuitejs.com/components/table/#editable

EDIT: More specifically I want to know how to get the type of rowData and what it contains. Also how is it "automatically" passed to the children from table?

import { mockUsers } from './mock';

const { Column, HeaderCell, Cell } = Table;
const defaultData = mockUsers(8);

const EditableCell = ({ rowData, dataKey, onChange, ...props }) => {
  const editing = rowData.status === 'EDIT';
  return (
    <Cell {...props} className={editing ? 'table-content-editing' : ''}>
      {editing ? (
        <input
          className="rs-input"
          defaultValue={rowData[dataKey]}
          onChange={event => {
            onChange && onChange(rowData.id, dataKey, event.target.value);
          }}
        />
      ) : (
        <span className="table-content-edit-span">{rowData[dataKey]}</span>
      )}
    </Cell>
  );
};

const ActionCell = ({ rowData, dataKey, onClick, ...props }) => {
  return (
    <Cell {...props} style={{ padding: '6px' }}>
      <Button
        appearance="link"
        onClick={() => {
          onClick(rowData.id);
        }}
      >
        {rowData.status === 'EDIT' ? 'Save' : 'Edit'}
      </Button>
    </Cell>
  );
};

const App = () => {
  const [data, setData] = React.useState(defaultData);

  const handleChange = (id, key, value) => {
    const nextData = Object.assign([], data);
    nextData.find(item => item.id === id)[key] = value;
    setData(nextData);
  };
  const handleEditState = id => {
    const nextData = Object.assign([], data);
    const activeItem = nextData.find(item => item.id === id);
    activeItem.status = activeItem.status ? null : 'EDIT';
    setData(nextData);
  };

  return (
    <Table height={420} data={data}>
      <Column width={200}>
        <HeaderCell>First Name</HeaderCell>
        <EditableCell dataKey="firstName" onChange={handleChange} />
      </Column>

      <Column width={200}>
        <HeaderCell>Last Name</HeaderCell>
        <EditableCell dataKey="lastName" onChange={handleChange} />
      </Column>

      <Column width={300}>
        <HeaderCell>Email</HeaderCell>
        <EditableCell dataKey="email" onChange={handleChange} />
      </Column>

      <Column flexGrow={1}>
        <HeaderCell>...</HeaderCell>
        <ActionCell dataKey="id" onClick={handleEditState} />
      </Column>
    </Table>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));```
yzdnegel
  • 103
  • 6
  • So this case is the same as "Cloning children with new props" then? And a more general question: If just given the Classes and components (without the example) how will I know that the rowData property even exists, and what it contains? @KonradLinkowski – yzdnegel Oct 02 '22 at 15:09
  • 1
    It's a custom component to a library, you know that from the documentation. First example already have implemented `console.log` so you can see what `rowData` is https://rsuitejs.com/components/table/#basic `rowData` is an element of the array `data` – Konrad Oct 02 '22 at 15:18
  • @KonradLinkowski thanks for the help. Also, what does "onChange && onChange(rowData.id, dataKey, event.target.value);" do in the onChange in EditableCell? What is the need for "onChange &&"? Does it check that it exists? and if so why the && because it only works for predicates. – yzdnegel Oct 02 '22 at 19:49

0 Answers0