React - jak stworzyć edytowalną tabelę

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:

// import React from 'react';

// import ReactDOM from 'react-dom';

​

// Komórka -----------------------------------------

​

const itemStyle = {

    padding: '2px',

    border: '1px solid silver',

    fontFamily: 'Arial',

    fontSize: '13px',

    display: 'flex'

};

​

const textStyle = {

    ...itemStyle,

    padding: '5px 4px',

    height: '16px'

};

​

const inputStyle = {

    padding: '0',

    flex: '1',

    width: '100%',

    minWidth: '20px',

    fontFamily: 'Arial',

    fontSize: '13px'

};

​

const buttonStyle = {

    flex: 'none'

};

​

const Cell = React.memo(({value, mode, onChange}) => {

    const [localMode, setLocalMode] = React.useState(mode ?? 'read');

    const [localValue, setLocalValue] = React.useState(value ?? '');

    React.useEffect(() => setLocalMode(mode ?? 'read'), [mode]);

    React.useEffect(() => setLocalValue(value ?? ''), [value]);

    if (localMode === 'edit') {

        const handleInputChange = (e) => setLocalValue(e.target.value);

        const handleSaveClick = () => {

            setLocalMode('read');

            onChange?.(localValue);

        };

        return (

          <div style={itemStyle}>

            <input type="text"

              value={localValue}

              style={inputStyle}

              onChange={handleInputChange} />

            <button style={buttonStyle} onClick={handleSaveClick}>Ok</button>

          </div>

        );

    }

    if (localMode === 'read') {

        const handleEditClick = () => {

            setLocalMode('edit');

        };

        return (

          <div style={textStyle} onClick={handleEditClick}>{localValue}</div>

        );

    }

    return null;

});

​

// Wiersz ------------------------------------------

​

const tdStyle = {

    padding: '1px',

    border: '1px solid black',

};

​

const optionStyle = {

    ...tdStyle,

    width: '30px'

};

​

const Row = React.memo(({ mode, columns, data, onChange, onDelete}) => {

    const handleDeleteClick = () => onDelete?.();

    return (

      <tr>

        {columns.map(({path}, columnIndex) => {

            const handleChange = value => {

                if (onChange) {

                    const changedData = { ...data, [path]: value };

                    onChange(columnIndex, changedData);

                }

            };

            return (

              <td key={path} style={tdStyle}>

                <Cell

                  mode={mode}

                  value={data[path]}

                  onChange={handleChange}

                />

              </td>

            );

        })}

        <td style={optionStyle}>

          <button onClick={handleDeleteClick}>Usuń</button>

        </td>

      </tr>

    );

});

​

// TABELA ----------------------------------------

​

const tableStyle = {

    border: '1px solid black',

    borderCollapse: 'collapse',

    width: '100%'

}

​

const Table = React.memo(({id, columns, data, onAdd, onChange, onDelete}) => {

    const [addedIndex, setAddedIndex] = React.useState();

    const handleAddClick = () => {

        onAdd?.(data.length);

        setAddedIndex(data.length);

    };

    return (

      <div>

        <table style={tableStyle}>

          <tbody>

            <tr>

              {columns.map(({path, name}) => (

                <th key={path} style={tdStyle}>{name}</th>

              ))}

            </tr>

            {data.map((rowData, rowIndex) => {

                const handleChange = (columnIndex, changedData) => {

                    onChange?.(rowIndex, columnIndex, changedData);

                };

                const handleDelete = () => {

                    if (rowIndex !== addedIndex) {

                        setAddedIndex(addedIndex - 1);

                    }

                    onDelete?.(rowIndex, rowData);

                };

                return (

                    <Row 

                      key={rowData[id]}

                      mode={addedIndex === rowIndex ? 'edit' : 'read'}

                      columns={columns}

                      data={rowData}

                      onChange={handleChange}

                      onDelete={handleDelete}

                    />

                );

            })}

          </tbody>

        </table>

        <br />

        <div>

          <button onClick={handleAddClick}>Dodaj wiersz</button>

        </div>

      </div>

    );

});

​

// PRZYKŁAD --------------------------------------

​

const columns = [

    { path: 'id',   name: 'ID'   },

    { path: 'name', name: 'Imię' },

    { path: 'age',  name: 'Wiek'  }

];

​

let counter = 0;

​

const App = () => {

    const [data, setData] = React.useState(() => ([

        { id: ++counter, name: 'Bartek',  age: 22 },

        { id: ++counter, name: 'Adam', age: 43 },

        { id: ++counter, name: 'Marek', age: 16 },

        { id: ++counter, name: 'Jacek', age: 29 }

    ]));

    const handleAdd = (rowIndex) => {

        const newRowData =  { id: ++counter };

        setData([ ...data, newRowData ]);

        //TODO: żądanie AJAX do serwera

        console.log(`Dodano pusty wiersz!`);

    };

    const handleChange = (rowIndex, columnIndex, changedRowData) => {

        const columnData = columns[columnIndex];

        const changedRowJson = JSON.stringify(changedRowData, null, 4);

        //TODO: żądanie AJAX do serwera

        console.log(`Changed row:\n${changedRowJson}`);

    };

    const handleDelete = (rowIndex, removedRowData) => {

        setData(data.filter((value, index) => index !== rowIndex));

        //TODO: żądanie AJAX do serwera

        console.log(`Usunięto wiersz: ${rowIndex}`);

    };

    return (

      <div>

        <Table

          id="id"

          columns={columns}

          data={data}

          onAdd={handleAdd}

          onChange={handleChange}

          onDelete={handleDelete}

        />

      </div >

    );

};

​

const root = document.querySelector('#root');

ReactDOM.render(<App/>, root );