مشکل با nesting

@parastooebrahimi
سلام.
به صورت زیر بنویسید :

options:{ ...data.options, sortDirection:direction}

بله امتحان کردم اینو
ولی درست نشد و بازم کل آپشنو آپدیت میکنه
@mohsenbostan

سلام با تغییر کد زیر مشکل حل میشه.

col = col.map(data => {
        if (data.name === sortField) {
          console.log("sina log", data.options);
          return {
            ...data,
            options: {
              ...data.options,
              sortDirection: sortDir
            }
          };
        } else{
         delete data.options.sortDirection
          return {
            ...data,
            options: {
              ...data.options,
            }
          };
        }
      });

برای تست هم فایل Example.js :

import React from "react";
import { CircularProgress, Typography } from "@material-ui/core";
import MUIDataTable from "mui-datatables";

class Example extends React.Component {
  state = {
    page: 0,
    count: 1,
    rowsPerPage: 5,
    sortOrder: {},
    data: [["Loading Data..."]],
    columns: [
      {
        name: "fullName",
        options: { filter: false }
      },
      {
        name: "title",
        label: "Title",
        options: {filter: false}
      },
      {
        name: "location",
        label: "Location",
        options: {}
      }
    ],
    isLoading: false
  };

  componentDidMount() {
    this.getData("", 0);
  }

  // get data
  getData = (url, page) => {
    this.setState({ isLoading: true });
    this.xhrRequest(url, page).then(res => {
      this.setState({ data: res.data, isLoading: false, count: res.total });
    });
  };

  getSrcData = () => {
    return [
      {
        fullName: "Gabby George",
        title: "Business Analyst",
        location: "Minneapolis"
      },
      {
        fullName: "Aiden Lloyd",
        title: "Business Consultant",
        location: "Dallas"
      },
      { fullName: "Jaden Collins", title: "Attorney", location: "Santa Ana" },
      {
        fullName: "Franky Rees",
        title: "Business Analyst",
        location: "St. Petersburg"
      },
      { fullName: "Aaren Rose", title: "Business Analyst", location: "Toledo" },

      {
        fullName: "John George",
        title: "Business Analyst",
        location: "Washington DC"
      },
      {
        fullName: "Pat Lloyd",
        title: "Computer Programmer",
        location: "Baltimore"
      },
      {
        fullName: "Joe Joe Collins",
        title: "Attorney",
        location: "Las Cruces"
      },
      { fullName: "Franky Hershy", title: "Paper Boy", location: "El Paso" },
      {
        fullName: "Aaren Smalls",
        title: "Business Analyst",
        location: "Tokyo"
      },

      { fullName: "Boogie G", title: "Police Officer", location: "Unknown" },
      {
        fullName: "James Roulf",
        title: "Business Consultant",
        location: "Video Game Land"
      },
      {
        fullName: "Mike Moocow",
        title: "Burger King Employee",
        location: "New York"
      },
      {
        fullName: "Mimi Gerock",
        title: "Business Analyst",
        location: "McCloud"
      },
      {
        fullName: "Jason Evans",
        title: "Business Analyst",
        location: "Mt Shasta"
      },

      {
        fullName: "Simple Sam",
        title: "Business Analyst",
        location: "Mt Shasta"
      },
      {
        fullName: "Marky Mark",
        title: "Business Consultant",
        location: "Las Cruces"
      },
      { fullName: "Jaden Jam", title: "Attorney", location: "El Paso" },
      {
        fullName: "Holly Jo",
        title: "Business Analyst",
        location: "St. Petersburg"
      },
      { fullName: "Suzie Q", title: "Business Analyst", location: "New York" }
    ];
  };

  sort = (page, sortOrder) => {
    this.setState({ isLoading: true });
    console.log("sina", sortOrder);
    this.xhrRequest(
      `/myApiServer?page=${page}&sort_order=${sortOrder}`,
      page,
      sortOrder
    ).then(res => {
      this.setState({
        data: res.data,
        page: res.page,
        sortOrder,
        isLoading: false,
        count: res.total
      });
    });
  };

  // mock async function
  xhrRequest = (url, page, sortOrder = {}) => {
    return new Promise((resolve, reject) => {
      // mock page data
      let fullData = this.getSrcData();
      let sortField = sortOrder.name;
      let sortDir = sortOrder.direction;
      const total = fullData.length; // mock record count from server - normally this would be a number attached to the return data
      let col = this.state.columns;
      console.log("col before", col);
      col = col.map(data => {
        if (data.name === sortField) {
          console.log("sina log", data.options);
          return {
            ...data,
            options: {
              ...data.options,
              sortDirection: sortDir
            }
          };
        } else{
         delete data.options.sortDirection
          return {
            ...data,
            options: {
              ...data.options,
            }
          };
        }
      });
      console.log("col after", col);
      this.setState(prevState => {
        return {
          ...prevState,
          columns: col
        };
      });

      console.log("log", fullData[0], sortField);
      if (sortField) {
        fullData = fullData.sort((a, b) =>
          a[sortField] > b[sortField]
            ? 1
            : a[sortField] === b[sortField]
            ? a[sortField] > b[sortField]
              ? 1
              : -1
            : -1
        );
      }

      const srcData = fullData.slice(
        page * this.state.rowsPerPage,
        (page + 1) * this.state.rowsPerPage
      );
      let data = srcData;

      setTimeout(() => {
        resolve({
          data,
          total,
          page
        });
      }, 500);
    });
  };

  changePage = (page, sortOrder) => {
    sortOrder = {
      name: "title",
      direction: "asc"
    };
    console.log("page", page, sortOrder);
    this.setState({
      isLoading: true
    });
    this.xhrRequest(`/myApiServer?page=${page}`, page, sortOrder).then(res => {
      this.setState({
        isLoading: false,
        page: res.page,
        sortOrder,
        data: res.data,
        count: res.total
      });
    });
  };

  render() {
    const { data, page, count, isLoading, rowsPerPage, sortOrder } = this.state;

    const options = {
      filter: true,
      filterType: "dropdown",
      responsive: "vertical",
      serverSide: true,
      count: count,
      rowsPerPage: rowsPerPage,
      rowsPerPageOptions: [],
      onTableChange: (action, tableState) => {
        console.log(action, tableState);

        // a developer could react to change on an action basis or
        // examine the state as a whole and do whatever they want

        switch (action) {
          case "changePage":
            this.changePage(tableState.page, tableState.sortOrder);
            break;
          case "sort":
            let a = tableState.announceText
              .replace("Table now sorted by ", "")
              .replace(" :", "")
              .split(" ");
            if (a[1] === "descending") a[1] = "desc";
            else a[1] = "asc";
            let b = { name: a[0], direction: a[1] };
            console.log(a);
            this.sort(tableState.page, b);
            break;
          default:
            console.log("action not handled.");
        }
      }
    };

    console.log("COLUMNS");
    console.dir(JSON.parse(JSON.stringify(this.state.columns)));

    return (
      <div>
        <MUIDataTable
          title={
            <Typography variant="h6">
              ACME Employee list
              {isLoading && (
                <CircularProgress
                  size={24}
                  style={{ marginLeft: 15, position: "relative", top: 4 }}
                />
              )}
            </Typography>
          }
          data={data}
          columns={this.state.columns}
          options={options}
        />
      </div>
    );
  }
}

export default Example;

@parastooebrahimi
کدی که آقای @mohsenbostan گفتن باید درست کار بکنه. حالا اگه درست کار نمیکنه پس ایراد کارتون از یه جای دیگه است.

 if (data.name === changedColumn) {
                    return {
                      ...data,

                     options:{ ...data.options, sortDirection:direction}
                    };
                  } else
                    return {
                      ...data,
                      options: { ...data.options, sortDirection:{}}
                    };
                }

@kamran.davar بله مثل اینکه اشکال جای دیگه ای هست که هنوز نفهمیدم از چی میتونه باشه

به این هم توجه داشته باشید که mui datatable اگر توی options یک prop داشته باشید که توی داکیومنتیشنش نباشه خودش خود به خود پاکش میکنه
مثلا اگه

options: { filter: false }

باشه،‌با کد بالا دیگه پاک نمیشه ولی اگه مثلا یه چیزی بزنید که براش بی معنی باشه مثل :

options: { salam: false }

این خودش پاکش میکنه و شاید شما فکر کنید که کد درست کار نمیکنه در صورتی که کد درست هستش