最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

reactjs - How to get the filters applied in a material-react-table? - Stack Overflow

matteradmin5PV0评论

I have created a table with material-react-table, where rows can be selected and exported in a PDF, I would like if these rows are filtered (for example, quantity greater than 5000) be able to get these filters and then be able to show them in the PDF and that can be understood in context of the data.

I tried creating a columnFilters state, and then using the onColumnFiltersChange library function, setting the new filters, this worked, but the result shows only the filter value, but not the filter name.

import React, { useEffect, useState } from "react";

import { Delete } from "@mui/icons-material";
import FileDownloadIcon from '@mui/icons-material/FileDownload';
import { Box, Button, ListItemIcon, MenuItem, lighten } from "@mui/material";
import { jsPDF } from 'jspdf';
import autoTable from 'jspdf-autotable';
import {
  MRT_GlobalFilterTextField,
  MRT_ToggleFiltersButton,
  MaterialReactTable,
  useMaterialReactTable,
} from "material-react-table";
import { MRT_Localization_ES } from "material-react-table/locales/es";

const MovementsTable = ({ movements, commodities, handleOpenDeleteModal }) => {
  const [columnFilters, setColumnFilters] = useState([]);
  const columns = [
    {
      id: "created_at",
      header: "Fecha",
      columns: [
        {
          accessorFn: (row) =>
            new Date(row.created_at).toLocaleDateString("es-ES", {
              year: "numeric",
              month: "2-digit",
              day: "2-digit",
              hour: "2-digit",
              minute: "2-digit",
              second: "2-digit",
            }),
          id: "created_at",
          header: "Fecha",
          size: 250,
        },
      ],
    },
    {
      id: "movement_id",
      header: "Movimiento Nº",
      columns: [
        {
          accessorFn: (row) => `${row.movement_id}`,
          id: "movement_id",
          header: "Movimiento Nº",
          size: 250,
        },
      ],
    },
    {
      id: "form_number",
      header: "Formulario Nº",
      columns: [
        {
          accessorFn: (row) => `${row.form_number}`,
          id: "form_number",
          header: "Formulario Nº",
          size: 250,
        },
      ],
    },
    {
      id: "commodity",
      header: "Producto",
      columns: [
        {
          accessorFn: (row) =>
            `${commodities[rowmodity] || "Producto Desconocido"}`,
          id: "commodity",
          header: "Producto",
          size: 250,
        },
      ],
    },
    {
      id: "quantity",
      header: "Cantidad [kg]",
      columns: [
        {
          accessorFn: (row) => `${row.quantity}`,
          id: "quantity",
          header: "Cantidad [kg]",
          size: 250,
        },
      ],
    },
    {
      id: "origin_destination",
      header: "Origen/Destino",
      columns: [
        {
          accessorFn: (row) =>
            `${row.movement_type === "input" ? "Ingreso desde " + row.origin : "Salida hacia " + row.destination}`,
          id: "origin_destination",
          header: "Origen/Destino",
          size: 250,
        },
      ],
    },
    {
      id: "observations",
      header: "Observaciones",
      columns: [
        {
          accessorFn: (row) => `${row.observations}`,
          id: "observations",
          header: "Observaciones",
          size: 250,
        },
      ],
    },
  ];

  const handleExportRows = (rows) => {
    const doc = new jsPDF('landscape');
  
    // Mapear las filas a los valores de las columnas
    const tableData = rows.map((row) => {
      return columns.map((column) => {
        return column.columns[0].accessorFn(row.original) || '';
      })
    });
  
    // Obtener los encabezados de las columnas
    const tableHeaders = columns.map((column) => {
      return column.columns[0].header;
    });
  
    // Crear la tabla en el PDF con los datos procesados
    autoTable(doc, {
      head: [tableHeaders],
      body: tableData,
      theme: 'grid',
      headStyles: {
        fillColor: [2, 129, 67],
        textColor: [255],
      },
    });
  
    // Guardar el reporte en PDF
    const now = new Date().toLocaleDateString('es-ES', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    }).replace(/\//g, '-');
    doc.save(`oilcan-movements-report-${now}.pdf`);
  };

  useEffect(() => {
    console.log(columnFilters);
  }, [columnFilters]);

  const table = useMaterialReactTable({
    columns,
    data: movements,
    enableColumnFilterModes: true,
    enableColumnOrdering: true,
    enableGrouping: true,
    enableColumnPinning: true,
    enableFacetedValues: true,
    enableRowActions: true,
    enableColumnFilterModes: true,
    onColumnFiltersChange: setColumnFilters, //hoist internal columnFilters state to your state
    state: { columnFilters }, //pass in your own managed columnFilters state
    enableRowSelection: true,
    localization: MRT_Localization_ES,
    initialState: {
      showColumnFilters: true,
      showGlobalFilter: true,
      columnPinning: {
        right: ["mrt-row-actions"],
      },
    },
    paginationDisplayMode: "pages",
    positionToolbarAlertBanner: "bottom",
    muiTableBodyRowProps: ({ row }) => ({
      sx: {
        backgroundColor:
          row.original.movement_type === "input" ? "#00800075" : "#ff000078",
      },
    }),
    muiSearchTextFieldProps: {
      size: "small",
      variant: "outlined",
    },
    muiPaginationProps: {
      color: "secondary",
      rowsPerPageOptions: [10, 20, 30],
      shape: "rounded",
      variant: "outlined",
    },
    renderRowActionMenuItems: ({ row, closeMenu }) => [
      <MenuItem
        key={0}
        onClick={() => {
          handleOpenDeleteModal(row.original.movement_id);
          closeMenu();
        }}
        sx={{ m: 0 }}
      >
        <ListItemIcon>
          <Delete />
        </ListItemIcon>
        Eliminar Movimiento
      </MenuItem>,
    ],
    renderTopToolbar: ({ table }) => {
      return (
        <Box
          sx={(theme) => ({
            backgroundColor: lighten(theme.palette.background.default, 0.05),
            display: "flex",
            gap: "0.5rem",
            p: "8px",
            justifyContent: "space-between",
          })}
        >
          <Box sx={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
            <MRT_GlobalFilterTextField table={table} />
            <MRT_ToggleFiltersButton table={table} />
          </Box>
        <Button
          disabled={
            !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
          }
          //only export selected rows
          onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
          startIcon={<FileDownloadIcon />}
        >
          Exportar Filas Seleccionadas
        </Button>
        </Box>
      );
    },
    renderTopToolbarCustomActions: ({ table }) => (
      <Box
        sx={{
          display: 'flex',
          gap: '16px',
          padding: '8px',
          flexWrap: 'wrap',
        }}
      >
        <Button
          disabled={table.getPrePaginationRowModel().rows.length === 0}
          //export all rows, including from the next page, (still respects filtering and sorting)
          onClick={() =>
            handleExportRows(table.getPrePaginationRowModel().rows)
          }
          startIcon={<FileDownloadIcon />}
        >
          Export All Rows
        </Button>
        <Button
          disabled={table.getRowModel().rows.length === 0}
          //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
          onClick={() => handleExportRows(table.getRowModel().rows)}
          startIcon={<FileDownloadIcon />}
        >
          Export Page Rows
        </Button>
        <Button
          disabled={
            !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
          }
          //only export selected rows
          onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
          startIcon={<FileDownloadIcon />}
        >
          Export Selected Rows
        </Button>
      </Box>
    ),
  });
  return <MaterialReactTable table={table} />;
};

export default MovementsTable;
Post a comment

comment list (0)

  1. No comments so far