triggers the toggle button from the cell props grid and removes spaces in the column table

class DetailComponent extends GridDetailRow {
  render() {
    const dataItem = this.props.dataItem;
    return (
      <section>
        <p>
          <strong>In Stock:</strong> {dataItem.UnitsInStock} units
        </p>
        <p>
          <strong>On Order:</strong> {dataItem.UnitsOnOrder} units
        </p>
        <p>
          <strong>Reorder Level:</strong> {dataItem.ReorderLevel} units
        </p>
        <p>
          <strong>Discontinued:</strong> {dataItem.Discontinued}
        </p>
        <p>
          <strong>Category:</strong> {dataItem.Category.CategoryName} -{' '}
          {dataItem.Category.Description}
        </p>
      </section>
    );
  }
}

const getDataRemark = (props) => {
    setPageError(false);
    setDataLoading(true);
    
    const salesplanKeyId = props.dataItem;
    const withQuery = require('with-query').default;
    const url = `${API_URL}/api/BankLeasing/Remarks/remarks`;
    const query = withQuery(url, {
      salesplanKeyId
    });
    try {
      requestHandler(query).then((dataRemark) => {
        setDataRemark(dataRemark);
        setDataLoading(false);
      })
    } catch (err) {
      console.log(err.message);
      setDataLoading(false);
    }
  }

  const myCell = (props) => {
    let dataItem = props.dataItem['salesplanID'];
    return (
      <td className="k-hierarchy-cell">
        <Button onClick={() => expandChange(dataItem)} tabIndex="-1">
          Detail
        </Button>
      </td>
    );
  }

  const expandChange = (event) => {
    getDataRemark(event);
    event.expanded = !event.value
    setExpanded((prevExpanded) => !prevExpanded);
  }

class DetailComponent extends GridDetailRow {
  render() {
    const dataItem = this.props.dataItem
    return (
    	<div>{dataItem.remarks}</div>
      	<div>{dataItem.createdBy}</div>
      	<div>{dataItem.lastUpdateat}</div>
    )
  }
}

const Page1 = (props) => {
  const [dataRemark, setDataRemark] = useState()
  
  const getDataRemark = (props) => {
    setPageError(false);
    setDataLoading(true);

    const SalesplanKeyId = props.salesplanID;
    const withQuery = require('with-query').default;
    const url = `${API_URL}/api/Remarks/remarks`;
    const query = withQuery(url, {
      SalesplanKeyId,
    });
    try {
      requestHandler(query).then((dataRemark) => {
        setDataRemark(dataRemark);
        console.log(dataRemark, 'INI DATA REMARKS')
        setDataLoading(false);
      });
    } catch (err) {
      console.log(err.message);
      setDataLoading(false);
    }
  };
}