Я поместил простое логическое состояние в пользовательский заголовок, план состоит в том, чтобы сделать это состояние управляющим выпадающим меню. Я использовал простой onClick для этого пользовательского заголовка, который устанавливает состояния в противоположное значение, и после этого регистрирует состояние. Но состояние остается неизменным и не меняется при каждом щелчке.
Это происходит, когда я устанавливаю столбцы с начальным setState, потому что мне нужно, чтобы моя таблица полностью базировалась на стороне сервера. При настройке столбцов с нормальным пусть это работает, но это не особая необходимость. Заголовок
выделен, щелкните по нему, и вы увидите журнал состояния в консоли.
export default function PositioningActionsColumn() {
const [stateData, setStateData] = useState([]);
const [stateColumns, setStateColumns] = useState([]);
const [isOpen, setIsOpen] = useState(false);
// setting the columns and data - will be from a fetch later
useEffect(() => {
setStateColumns([
{
title: nameHeader,
field: "name"
},
{
title: "Surname",
field: "surname",
initialEditValue: "initial edit value"
},
{ title: "Birth Year", field: "birthYear", type: "numeric" },
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]);
setStateData([
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{ name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34 }
]);
}, []);
const orderFunc = (orderedColumnId, orderDirection) => {
console.log(
"orderedColumnId:",
orderedColumnId,
"orderDirection:",
orderDirection
);
};
const searchFunc = e => {
console.log(e);
};
const handleClick = () => {
setIsOpen(!isOpen);
console.log(isOpen);
};
const nameHeader = (
<div style={{ background: "lightblue" }} onClick={handleClick}>
Click on this custom Name Header
</div>
);
return (
<MaterialTable
title="Editable Preview"
icons={tableIcons}
columns={stateColumns}
data={stateData}
onOrderChange={(orderedColumnId, orderDirection) => {
orderFunc(orderedColumnId, orderDirection);
}}
onSearchChange={e => searchFunc(e)}
options={{ draggable: false, selection: true, actionsColumnIndex: -1 }}
actions={[
{
tooltip: "Remove All Selected Users",
icon: "delete",
onClick: (evt, data) => {
console.log({ data });
alert("You want to delete " + data.length + " rows");
}
},
{
isFreeAction: true,
tooltip: "FreeAction",
icon: () => <div>Free</div>,
onClick: (evt, data) => {
console.log({ data });
}
}
]}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
console.log({ newData });
const data = stateData;
data.push(newData);
setStateData(data, () => resolve());
}
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
console.log({ newData }, { oldData });
const data = stateData;
const index = data.indexOf(oldData);
data[index] = newData;
setStateData(data, () => resolve());
}
resolve();
}, 1000);
}),
onRowDelete: oldData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
console.log({ oldData });
let data = stateData;
const index = data.indexOf(oldData);
data.splice(index, 1);
setStateData(data, () => resolve());
}
resolve();
}, 1000);
})
}}
/>
);
}
https://codesandbox.io/s/material-table-testing-actions-position-and-output-2-sj1tt