web-dev-qa-db-fra.com

table des matières Comment faire une table sélectionnable et modifiable?

je veux faire celui-ci (quelques actions pour sélectionné et quelques actions pour chaque ligne). Aidez s'il vous plaît, merci!

enter image description here

J'utilise material-table avec ReactJS. Maintenant, j'ai des actions sur chaque ligne sans sélection, si ajouter un accessoire de sélection, ces actions disparaissent. Je ne sais pas comment combiner chaque action de ligne avec plusieurs actions ..

reactjsmaterial-uimaterial-table
4
oHorbachov

Vous pouvez ajouter le position: 'row' prop aux actions. Il y a 4 options disponibles pour le prop position: auto ', toolbar, toolbarOnSelect, row

Cet extrait de code minimal devrait fonctionner

   <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