DevExpress / devextreme-reactive

Business React components for Bootstrap and Material-UI
https://devexpress.github.io/devextreme-reactive/
Other
2.08k stars 381 forks source link

Adding icon in tree grid #3438

Closed reactatfina2net closed 2 years ago

reactatfina2net commented 2 years ago

Screenshot 2021-11-18 140542

so what i want to do is to add icons to the rows if thats possible

import {
  CustomTreeData,
  FilteringState,
  IntegratedFiltering,
  IntegratedSelection,
  IntegratedSorting,
  SelectionState,
  SortingState,
  TreeDataState,
} from "@devexpress/dx-react-grid";
import {
  Grid,
  Table,
  TableColumnVisibility,
  TableFilterRow,
  TableHeaderRow,
  TableTreeColumn,
} from "@devexpress/dx-react-grid-material-ui";
import { makeStyles, Paper } from "@material-ui/core";
import SentimentSatisfiedIcon from "@material-ui/icons/SentimentSatisfied";
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";

const getChildRows = (row, rows) => {
  const childRows = rows.filter((r) => r.parentRowId === (row ? row.rowId : 0));
  return childRows.length ? childRows : null;
};
const getRowId = (row) => row.rowId;

const CatalogRightGridTable = ({
  rows,
  columns,
  setSelectedGridRowIds,
  setEditItem,
  selectedGridRowIds,
}) => {

  const onSelectionChange = (selection) => {
    setSelectedGridRowIds(selection);
    if (selection.length === 1) {
      const selectedItem = rows.find((row) => row.rowId === selection[0]);
      setEditItem(selectedItem);
    } else {
      setEditItem(null);
    }
  };

  return (
      <Grid rows={rows} columns={columns} getRowId={getRowId}>
        <TreeDataState />
        <FilteringState />
        <SortingState />
        <SelectionState
          selection={selectedGridRowIds}
          onSelectionChange={onSelectionChange}
          selectByRowClick
        />
        <CustomTreeData getChildRows={getChildRows} />
        <IntegratedFiltering />
        <IntegratedSelection />
        <IntegratedSorting />
        <Table />
        <TableColumnVisibility />
        <TableHeaderRow showSortingControls />
        <TableFilterRow />
        <TableTreeColumn />
        {columns.length > 0 && (
          <TableTreeColumn
            for={columns[0].name}
            showSelectionControls
            showSelectAll
          />
        )}
      </Grid>
  );
};
github-actions[bot] commented 2 years ago

Thank you for using Devextreme Reactive. We use GitHub issues to track bug and feature requests. We process incoming issues as soon as possible. Issues that have been inactive for 30 days are closed. If you have an active DevExtreme license, you can contact us in our Support Center for updates. Otherwise, post your question on StackOverflow.