web-dev-qa-db-ja.com

material-table選択可能で編集可能なテーブルはどのようにすればよいですか？

これを実行したい（選択したアクションと各行のアクション）。助けてください、ありがとう！

enter image description here

私が使う material-table with ReactJS。これで、選択不可の各行にアクションがあります。選択プロップを追加すると、これらのアクションが消えます。各行のアクションを複数のアクションと組み合わせる方法がわかりません。

reactjsmaterial-uimaterial-table
4
oHorbachov

position: 'row'アクションへの小道具。 positionプロパティには4つのオプションがあります：auto '、toolbar、toolbarOnSelect、row

この最小限のコードスニペットは機能するはずです

   <MaterialTable
          actions={[
            {
              icon: 'save',
              tooltip: 'Save User',
              position: 'row',
              onClick: (event, rowData) => alert('You saved ' + rowData.name)
            },
            {
              icon: 'delete',
              tooltip: 'Delete User',
              position: 'row',
              onClick: (event, rowData) =>
                alert('You want to delete ' + rowData.name)
            }
          ]}
          columns={[
            { title: 'Name', field: 'name' },
            { title: 'Surname', field: 'surname' },
            { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
            {
              title: 'Birth Place',
              field: 'birthCity',
              lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }
            }
          ]}
          data={[
            {
              name: 'Mehmet',
              surname: 'Baran',
              birthYear: 1987,
              birthCity: 63
            },
            {
              name: 'Zerya Betül',
              surname: 'Baran',
              birthYear: 2017,
              birthCity: 34
            }
          ]}
          options={{
            selection: true,
            actionsColumnIndex: -1
          }}
          title="Positioning Actions Column Preview"
        />
0
heyjr