#reactjs #sorting #material-ui #custom-action #material-table
#reactjs #сортировка #материал-пользовательский интерфейс #пользовательское действие #материал-таблица
Вопрос:
У меня есть этот код:
let materialTableRef = React.createRef<MaterialTable<RowData>>();
<MaterialTable
title=""
columns={getTableDataColumns()}
data={getTableDataValues()}
style={{ width: "100%", backgroundColor: "transparent" }}
onChangePage={(newPage: number) => {
setPage(newPage 1);
}}
onChangeRowsPerPage={(pageSize: number) => {
setRowsPerPage(pageSize);
}}
page={page - 1}
totalCount={paging.TotalRecordCount}
initialFormData={initialFormData}
tableRef={materialTableRef}
actions={[
{
icon: 'tune',
isFreeAction: true,
tooltip: 'Toggle columns filter',
onClick: (event) => setShowFilter(!showFilter),
},
{
icon: 'library_add',
tooltip: 'Copy row',
onClick: (event, rowData) => {
const materialTable: any = materialTableRef.current;
setInitialFormData({
...rowData,
name: null,
});
materialTable.dataManager.changeRowEditing();
materialTable.setState({
...materialTable.dataManager.getRenderState(),
showAddRow: true,
});
},
},
]}
editable={{
onRowAdd: newData =>
new Promise(async (resolve, reject) => {
//do something
}),
onRowUpdate: (newData, oldData) =>
new Promise(async (resolve, reject) => {
//do something
}
),
onRowDelete: data =>
new Promise(async (resolve, reject) => {
//do something
})
}}
/>
Таким образом, каждая строка имеет 3 действия слева: копировать, редактировать и удалять
Действие «копировать» — это пользовательское действие, в которое включены «редактировать» и «удалить» из компонента. Я хочу, чтобы значок моего пользовательского действия отображался в конце, а не в начале.
как мне отсортировать значки действий? Я хочу, чтобы значок копирования строки был последним значком.
Любая помощь будет принята с благодарностью. Спасибо
Ответ №1:
Похоже, это было помечено как wontfix : https://github.com/mbrn/material-table/issues/757
Однако, если вы проверите отображаемый ими DOM, вы увидите, что контейнер элементов действия имеет свойство CSS display: flex
Поэтому я рекомендую сделать ваш гибкий элемент действия «Копировать», чтобы иметь более высокую order
.your-copy-action-item {
order: 3;
}
Читайте здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/order
Комментарии:
1. это прекрасно работает. Большое вам спасибо! Теперь мне нужно выяснить, как оформить iconbutton. Я опубликую обновление, когда разберусь с этим.
Ответ №2:
Это решение работает… Я добавил компонент пользовательского действия:
let materialTableRef = React.createRef<MaterialTable<RowData>>();
<MaterialTable
title=""
components={{
Action: props => {
if (typeof props.action === "function") {
var element = props.action(props.data);
return (
<IconButton aria-label={element.tooltip} size="small" onClick={(event) => {
element.onClick(event, props.data);
}} >
<element.icon />
</IconButton>
);
}
if (typeof props.action.icon === "object" || props.action.isFreeAction) {
return <MTableAction {...props} />
}
else {
return (
<IconButton aria-label="{props.action.icon}" size="small"
style={props.action.icon === "library_add" ? { order: 3 } : null}
onClick={(event) => props.action.onClick(event, props.data)} >
<Icon>{props.action.icon}</Icon>
</IconButton>
);
}
}
}}
columns={getTableDataColumns()}
data={getTableDataValues()}
style={{ width: "100%", backgroundColor: "transparent" }}
onChangePage={(newPage: number) => {
setPage(newPage 1);
}}
onChangeRowsPerPage={(pageSize: number) => {
setRowsPerPage(pageSize);
}}
page={page - 1}
totalCount={paging.TotalRecordCount}
initialFormData={initialFormData}
tableRef={materialTableRef}
actions={[
{
icon: 'tune',
isFreeAction: true,
tooltip: 'Toggle columns filter',
onClick: (event) => setShowFilter(!showFilter),
},
{
icon: 'library_add',
tooltip: 'Copy row',
onClick: (event, rowData) => {
const materialTable: any = materialTableRef.current;
setInitialFormData({
...rowData,
name: null,
});
materialTable.dataManager.changeRowEditing();
materialTable.setState({
...materialTable.dataManager.getRenderState(),
showAddRow: true,
});
},
},
]}
editable={{
onRowAdd: newData =>
new Promise(async (resolve, reject) => {
//do something
}),
onRowUpdate: (newData, oldData) =>
new Promise(async (resolve, reject) => {
//do something
}
),
onRowDelete: data =>
new Promise(async (resolve, reject) => {
//do something
})
}}
/>