Блог

В firestore у меня есть эти поля title , createdDate , и text . Как мне отобразить поля title и createdDate в mui-datatable. Затем text они будут отображаться внутри развернутой строки. Как я могу это сделать?

Вот как выглядят данные, если я их утешу.войдите в blogs :

 const columns = ["Title", "Created Date"];
const [blogs, setBlogs] = useState([]);

 useEffect(() => {
const unsubscribe = firestore
  .collection("blogs")
  .onSnapshot((snapshot) => {
    const arr = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      arr.push({
        text: parse(data.text),
        Title: data.title,
        "Created Date": new Date(
          data.createdDate.seconds * 1000
        ).toDateString(),
      });
    });
    setBlogs(arr);
    setIsLoading(true);
  });

    return () => {
      unsubscribe();
    };
  }, []);

  const options = {
    filter: true,
    expandableRows: true,
    renderExpandableRow: (rowData, rowMeta) => {
      console.log(); //how do I render the `text` here from firestore?
    },

  };
 

Внутри возврата: я попытался поместить blogs данные внутрь, но это не работает. Никаких данных не отображается.

  <MUIDataTable
    title={"List"}
    columns={columns}
    data={blogs}
    options={options}
  />
 

Просто переместите свое setBlogs внимание внутрь onSnapshot слушателя, как здесь:

 useEffect(() => {
  const unsubscribe = firestore
    .collection("blogs")
    .onSnapshot((snapshot) => {
      const arr = [];
      snapshot.forEach((doc) => {
        const data = doc.data();
        arr.push({
          text: parse(data.text),
          Title: data.title,
          "Created Date": new Date(data.createdDate.seconds * 1000).toDateString(),
        });
        setBlogs(arr);
      });
    
      setIsLoading(true);
  });

  return () => {
    unsubscribe();
  };
}, []);
 

Если он находится за пределами onSnapshot прослушивателя, вы всегда будете устанавливать массив blogs как пустой, потому setBlogs что он будет выполнен до запуска onSnapshot прослушивателя.

Это их способ, которым вы можете изменить и расширить строку:

 import MUIDataTable, {ExpandButton} from "../../src/";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";

 const options = {
      filter: true,
      filterType: 'dropdown',
      responsive: 'standard',
      expandableRows: true,
      expandableRowsHeader: false,
      expandableRowsOnClick: true,
      isRowExpandable: (dataIndex, expandedRows) => {
        if (dataIndex === 3 || dataIndex === 4) return false;

        // Prevent expand/collapse of any row if there are 4 rows expanded already (but allow those already expanded to be collapsed)
        if (expandedRows.data.length > 4 amp;amp; expandedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) return false;
        return true;
      },
      rowsExpanded: [0, 1],
      renderExpandableRow: (rowData, rowMeta) => {
        const colSpan = rowData.length   1;
        return (
          <TableRow>
            <TableCell colSpan={colSpan}>
              Custom expandable row option. Data: {JSON.stringify(rowData)}
            </TableCell>
          </TableRow>
        );
      },
      onRowExpansionChange: (curExpanded, allExpanded, rowsExpanded) => console.log(curExpanded, allExpanded, rowsExpanded)
    };

 

Это из приведенного здесь примера. Просто убедитесь, что ваша структура данных может работать с примером (возможно, вам придется немного перенять ее).