DevExpress / devextreme-reactive

Business React components for Bootstrap and Material-UI

Home Page:https://devexpress.github.io/devextreme-reactive/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Adding icon in tree grid

reactatfina2net opened this issue · comments

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>
  );
};

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.