search در mui data table

سلام. کمی بیشتر در مورد سوالتون توضیح بدید.
لینک داکیومنتیشن رو بزارین
ورودی ها و خرو جی های مد نظرتون رو مشخص کنید
تا بشه سوالتون رو بررسی کرد

@kamran.davar
سلاام. این لینک داکیومنتیشنش هست
https://github.com/gregnb/mui-datatables
این هم یک مثال ازش:
https://codesandbox.io/s/muidatatables-custom-toolbar-9vynn?file=/index.js

من serverSide رو در optionها true قرار دادم. حالا میخوام sorting اون رو سمت سرور پیاده سازی کنم. به این صورت که اگر مثلا بر روی name کلیک شد من این sorting رو با api انجام بدم

کاری که برای sort کردن name انجام دادم:
@kamran.davar
@sinashahoveisi

 onTableChange: (action, tableState) => {

                console.log(action, tableState);
                switch (action) {;

                        case 'sort':
                            console.log("action is" , action)
                            console.log("active column", tableState.activeColumn)
                            switch(tableState.activeColumn){

                                case '6' :
                                    this.setState({sortKind:5 },()=>this.filterByCategories)
                            }
                            break;

                }

            },

ولی جواب نمیده. این هم تابع filterByCategory

 filterByCategories = (page) => {

        axios.post(`${process.env.REACT_APP_EMC_URL}api/printBatch/details`, {
            relations: true,
            take: 10,
            skip: (page - 1) * 10,
            storeID: this.state.checkedStore,
            DepartmentCodes: this.state.checkedDepartment,
            shelfLocationGuids: this.state.checkedShelfLocation,
            warehouseDirectIndicators: this.state.checkedWarehouse,
            ComplianceIndicator: this.state.checked,
            keyword: this.state.keyword,
            sortKind: this.state.sortKind,
            sort:this.state.sort,

        }).then(response => {

            this.setState({
                detailData: response.data.list,
                isLoading: false,
                count: response.data.totalCount,

            })

        })

    }

کد های مربوط به این لینک رو مطالعه کردین؟ @parastooebrahimi
https://github.com/gregnb/mui-datatables/blob/master/examples/serverside-pagination/index.js

سلام به صورت زیر میتوانید انجام دهید:
فایل App.js

import React from "react";
import ReactDOM from "react-dom";

import Example from "./Example";

class App extends React.Component {

  render() {
    return (
      <div>
        <Example />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

و فایل 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",
        label: "Full Name",
        options: {
          customBodyRender: (value, tableMeta, updateValue) => {
            // Here you can render a more complex display.
            // You're given access to tableMeta, which has
            // the rowData (as well as the original object data).
            // See the console for a detailed look at this object.

            console.log("customBodyRender");
            console.dir(tableMeta);
            return value;
          }
        }
      },
      {
        name: "title",
        label: "Title",
        options: {}
      },
      {
        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();
      const total = fullData.length; // mock record count from server - normally this would be a number attached to the return data

      let sortField = sortOrder.name;
      let sortDir = sortOrder.direction;
      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) => {
    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: [],
      sortOrder: sortOrder,
      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(" ");
            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;

@kamran.davar بله.. مشکل کد خودم رو نمیفهمم چرا جواب نمیده ولی با کد بالا یه مقداریش درست عمل میکنه..

@sinashahoveisi
ممنونم ازتون. الان لاگ رو که چک میکنم فقط descending هست و هر چقدر کلیک میکنم برای سورتینگ باز هی descending رو بر میگردونه و ascending نمیشه. فلشیم که برای سورتینگ بالا و پایین میشه هم بعد از اولین کلیک محو میشه...
فانکشن سورتم به صورت زیره :

 handleSort = (active) => {
         this.setState({ isLoading: true });
    console.log("sina", active);
        debugger
        switch (active.name) {
            case 'Name':
                active.direction=='ascending' ? this.setState({ sortKind: 5 ,sort:0 }, () => this.filterByCategories()) : this.setState({ sortKind: 5 ,sort:1 }, () => this.filterByCategories())
                break;

        }

    }

توی آپشن ها onTableChange هم به صورت زیرهست:

onTableChange: (action, tableState) => {

                console.log(action, tableState);
                switch (action) {
                    case 'changePage':
                        this.changePage(tableState.page);
                        break;

                    case "sort":
                        let a = tableState.announceText
                            .replace("Table now sorted by ", "")
                            .replace(" :", "")
                            .split(" ");
                        let b = { name: a[0], direction: a[1] };
                        console.log("a is",a);
                        console.log("b is",b);
                        this.handleSort( b);
                        break;

                }

            },

با استفاده از sortDirection در options در columns میتوانید این کار را انجام دهید.
فایل Example.js : (فقط تابع sort مدنظرتان اعمال کنید)

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",
      },
      {
        name: "title",
        label: "Title",
        options: {}
      },
      {
        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
      col = col.map((data)=>{
        if (data.name === sortField ) {
          return {
            ...data,
            options: { sortDirection: sortDir }
          }
        }
        else return {
          ...data,
          options : {}
        }
      })
      console.log('col', 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: [],
      sortDirection:{
        name: 'title',
        direction: 'asc'
      },
      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;

@sinashahoveisi
ممنونم ازتون. کدم رو به صورت زیر تغییر دادم و درست شد:

 onTableChange: (action, tableState) => {

                //console.log(action, tableState);
                switch (action) {
                    case 'changePage':
                        this.changePage(tableState.page);
                        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 is",a);
                      console.log("b is",b);
                      let changedColumn= b.name
                      let direction=b.direction
                      let col = this.state.columns.map(data => {
                        if (data.name === changedColumn) {
                          return {
                            ...data,
                            options: { sortDirection: direction }
                          };
                        } else
                          return {
                            ...data,
                            options: {}
                          };
                      });
                      console.log("col", col);
                      console.log("direction is", direction)
                     this.setState(prevState=>({
                         ...prevState,
                         columns:col
                     }),()=>this.handleSort(changedColumn,direction))

                      break;

                }

            },

@sinashahoveisi
فقط یه مشکل دیگه که میمونه با کد بالا همه ی تنظیماتی که توی options برای رندر کردن OnSelectedColumns , customBodyRender کرده بودم حذف میشه و به جاش دایرکشنو فقط توی option ها میزاره.. چه کنم که بقیه ی آپشن ها بمونن و فقط sortDirection رو تغییر بده؟

میتونید متغیر 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,
            }
          };
        }
      });

سلام و وقت بخیر، عذرمیخوام توی همین آپشن های mui-datatable یک آپشن به اسم downloadOptions هست که مربوط به گرفتن خروجی csv می‌باشد. این خروجی از زبان فارسی پشتیبانی نمیکند، خواستم بپرسم چطور این امکان رو میشه فراهم کرد که type فایل روی utf8 تنظیم شده و موقع دانلود خروجی از فارسی هم پشتیبانی کند؟ سپاس