ReactJS: Machen Sie eine editierbare Tabelle mit reagieren Tisch

Question

Ich verwende reagieren Tisch npm Paket (https://www.npmjs.com/package/react-table) zum Erzeugen von meinem Tisch:

<ReactTable 
    data={ tableData } 
    columns={ tableColumns } 
    showPagination={ false } 
    defaultPageSize={ tableData.length } 
/> 

Die Tabelle wird wie erwartet gezeigt. Aber jetzt möchte ich diese Tabelle editierbar machen. Also muss ich Eingabefelder mit Datenwerten anstatt nur Textdaten verwenden.

Wie muss ich das tun? Ich verstehe die Dokumente für diesen Punkt nicht ... Also brauche ich etwas Hilfe.

Answer 1

Zuerst müssen Sie die Spalten bearbeiten Requisiten

Check render: props => <input value={props.row.name} onChange={onChangeFct} /> 

Zum Beispiel:

const onChangeFct =() => console.log("onChange usually handled by redux"); 
const tableColumns = [ 
{ 
    header: 'Id', 
    accessor: 'id' 
}, 
{ 
    header: 'Name', 
    accessor: 'name', 
    render: props => <input value={props.row.name} onChange={onChangeFct} /> 
} 
] 


<ReactTable 
    data={ tableData } 
    columns={ tableColumns } 
    showPagination={ false } 
    defaultPageSize={ tableData.length } 
/> 

Answer 2

Sie Text anstelle bearbeiten Plugins wie react-x-editable Plugin Tabelle editierbar machen verwenden können, wie es die beiden Modi bietet: Inline und Popup.