用MUI-DATABLABLES分页和分类

Question

如何使用服务器端的分页和过滤MUI-DataTable显示数据？截至目前，我还没有使它起作用。这些是我完成的代码。

我也有一个问题，即所有的firestore数据都被获取而不是仅10个数据。

10

来自

rowsPerPage

。 RECEREATED代码和框：

Https：//codesandbox.io/s/mui-datatable-server-side-pagination-filtering-filtering-and-sorting-sorting-y8pyp7

export default function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [count, setCount] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  useEffect(() => {
    let isMounted = true;

    const getUsers = async () => {
      const querySnapshot = await getDocs(
        collection(db, "users"),
        orderBy("firstName", "asc"),
        limit(rowsPerPage)
      );
      const arr = [];
      querySnapshot.forEach((doc) => {
        arr.push({
          ...doc.data()
        });
      });
      if (isMounted) {
        setUsers(arr);
        setCount(arr.length);
        loading(true);
      }
    };

    getUsers().catch((err) => {
      if (!isMounted) return;
      console.error("failed to fetch data", err);
    });

    return () => {
      isMounted = false;
    };
  }, []);

  const columns = [
    {
      name: "firstName",
      label: "First Name",
      options: {
        filter: false,
        display: true
      }
    },
    {
      name: "lastName",
      label: "Last Name",
      options: {
        filter: false,
        display: true
      }
    },

    {
      name: "number",
      label: "Number",
      options: {
        filter: false,
        sort: true
      }
    }
  ];

  console.log(rowsPerPage, "rowsPaerPage");
  console.log(users, "users");

  const options = {
    print: true,
    filterType: "multiselect",
    selectableRows: "none",
    responsive: "standard",
    fixedHeader: true,
    count: count,
    rowsPerPage: rowsPerPage,
    serverSide: true
  };

  return (
    <div className="App">
      <ThemeProvider theme={createTheme()}>
        <MUIDataTable
          title={"Reports"}
          options={options}
          columns={columns}
          data={users}
        />
      </ThemeProvider>
    </div>
  );
}

Answer 1

query()

和

limit()

方法时，您应该使用

orderBy()

方法。请参阅下面的代码：

    const getUsers = async () => {
      const usersRef = collection(db, "users");
      const q = query(
          usersRef,
          orderBy("firstName", "asc"),
          limit(rowsPerPage)
          );
      const querySnapshot = await getDocs(q);
      const arr = [];
      querySnapshot.forEach((doc) => {
        arr.push({
          ...doc.data()
        });
      });
      if (isMounted) {
        setUsers(arr);
        setCount(arr.length);
        loading(true);
      }
    };

有关更多信息，您可以查看以下文档：

订单和限制数据
执行查询