Как поместить пользовательский тег кнопки в строки, использовать таблицу материалов и typeScript, и какие реквизиты он ожидает получить?

Question

У меня есть несколько вопросов :) Я пытаюсь поместить тег аватара в каждую строку в моей таблице и отредактировать кнопку, и она принимает кнопку редактирования для обоих. Как я могу переместить действие на правую сторону стола? Как мне отменить заголовок «Действия» в верхней части таблицы? И что именно «PROPS» я должен передать, если я использую TS в следующем примере:

    <MaterialTable
      icons={tableIcons}
      columns={this.state.columns}
      data={this.state.data}
      title='Users Management'

      actions={[
        {
          icon: 'edit',
          tooltip: 'Edit User',
          onClick: (event) => { alert('Edit!!'); },
        },
        {
          icon: 'avatar',
          tooltip: 'Avatar User',
          onClick: (event) => { alert("You want to delete "); }
        }
      ]}

    components={{
      Action: **props** => (
        <Button
          onClick={(event: any) => props.action.onClick}>
          EDIT
        </Button>
      ),
    }}
    />

введите описание изображения здесь

Answer 1

Итак, давайте разделим этот вопрос на части:

1. Как мне отменить заголовок «Действия» в верхней части таблицы? Вы можете просто переопределить опору localization={{header.actions: 'Test'}}, чтобы изменить заголовок столбца действия, например, на Test. Вы также можете добавить пробел, чтобы скрыть его.

2. Как я могу переместить действие в правую часть таблицы? Вы можете переопределить options={{actionsColumnIndex: 1}}, например, чтобы переместить его во вторую позицию или установить его в -1, чтобы переместить его в конец всех столбцов.

3. его кнопка редактирования используется для обоих. Поскольку вы не предоставляете пользовательские элементы, он отображает текст. Вы должны импортировать icons={tableIcons}, как написано в readme . Чтобы отобразить значок аватара, просто добавьте объект аватара к вашему tableIcons объекту.

4. Чтобы узнать, какие реквизиты необходимо пройти, посмотрите эту страницу docs .