如何在React的Material UI表格中将操作列设置为最后一列？

Got it, let's fix this so your actions column lands at the very end of your MaterialTable. Here are two straightforward approaches depending on whether you're using the auto-generated actions from the editable prop or custom action columns:

When you use editable={{}}, MaterialTable automatically creates an actions column. To move it to the last position, just specify the columnOrder in the options prop, placing the default actions column's field name (actions) after all your custom columns:

<MaterialTable
  title="Patient List"
  columns={state.columns}
  data={data}
  onRowClick={(event, rowData) => handleCLickRow(event, rowData)}
  editable={{}} // Fixed the extra parenthesis and comma in your original code
  options={{
    // First list all fields from your custom columns, then add the default "actions" column
    columnOrder: [...state.columns.map(col => col.field), 'actions']
  }}
/>

This configuration forces the table to display your custom columns first, followed by the auto-generated actions column at the end.

If you prefer to manually define your actions column instead of relying on the editable prop's auto-generation, simply append the actions column object to the end of your state.columns array:

// Example in your state setup or update logic
const [columns, setColumns] = useState([
  { field: 'patientId', title: 'Patient ID' },
  { field: 'name', title: 'Patient Name' },
  { field: 'age', title: 'Age' },
  // Add your custom actions column as the last item
  {
    field: 'actions',
    title: 'Actions',
    render: (rowData) => (
      <div style={{ display: 'flex', gap: '8px' }}>
        <button onClick={() => handleEdit(rowData)}>Edit</button>
        <button onClick={() => handleDelete(rowData)}>Delete</button>
      </div>
    )
  }
]);

Then render the MaterialTable as usual, and your custom actions column will naturally appear at the end of the table.

Also, don't forget to fix the small syntax error in your original code: the editable={{}), part had an extra parenthesis and comma, which would break component rendering.

内容的提问来源于stack exchange，提问作者atik mahbub