How can I make the width of the reactGrid container responsive?

[thealdoamati]

I'm trying to make the div involving my ReactGrid component responsive, not the sheet but I want to make a side scroll for the user to see the sheet.

I had a function to add new columns, but when I added more columns, the width got so big that it passed the screen.

I want to make a scroll like this:

But my sheet gets this big:

This is the code:

import React, { useState, useEffect } from 'react'
import { columns as dataColumns } from '../../../components/Sheets/columns'
import {
  rows as dataRows,
  styledTextCell,
  styledNonEditableTextCell,
} from '../../../components/Sheets/rows'
import { formatCurrency } from '../../../utils/func/formatCurrency'
import {
  CellChange,
  ChevronCell,
  ReactGrid,
  Row,
  TextCell,
} from '@silevis/reactgrid'
import { formatDate2 } from '../../../utils/func/formatDate2'

import '@silevis/reactgrid/styles.css'

const findChevronCell = (row: Row) =>
  row.cells.find((cell) => cell.type === 'chevron') as ChevronCell | undefined

const findParentRow = (rows: Row[], row: Row) =>
  rows.find((r) => {
    const foundChevronCell = findChevronCell(row)
    return foundChevronCell ? r.rowId === foundChevronCell.parentId : false
  })

const hasChildren = (rows: Row[], row: Row): boolean =>
  rows.some((r) => {
    const foundChevronCell = findChevronCell(r)
    return foundChevronCell ? foundChevronCell.parentId === row.rowId : false
  })

const isRowFullyExpanded = (rows: Row[], row: Row): boolean => {
  const parentRow = findParentRow(rows, row)
  if (parentRow) {
    const foundChevronCell = findChevronCell(parentRow)
    if (foundChevronCell && !foundChevronCell.isExpanded) return false
    return isRowFullyExpanded(rows, parentRow)
  }
  return true
}

const getExpandedRows = (rows: Row[]): Row[] =>
  rows.filter((row) => {
    const areAllParentsExpanded = isRowFullyExpanded(rows, row)
    return areAllParentsExpanded !== undefined ? areAllParentsExpanded : true
  })

const getDirectChildRows = (rows: Row[], parentRow: Row): Row[] =>
  rows.filter(
    (row) =>
      !!row.cells.find(
        (cell) =>
          cell.type === 'chevron' &&
          (cell as ChevronCell).parentId === parentRow.rowId,
      ),
  )

const assignIndentAndHasChildren = (
  rows: Row[],
  parentRow: Row,
  indent: number = 0,
) => {
  ++indent
  getDirectChildRows(rows, parentRow).forEach((row) => {
    const foundChevronCell = findChevronCell(row)
    const hasRowChildrens = hasChildren(rows, row)
    if (foundChevronCell) {
      foundChevronCell.indent = indent
      foundChevronCell.hasChildren = hasRowChildrens
    }
    if (hasRowChildrens) assignIndentAndHasChildren(rows, row, indent)
  })
}

const buildTree = (rows: Row[]): Row[] =>
  rows.map((row) => {
    const foundChevronCell = findChevronCell(row)
    if (foundChevronCell && !foundChevronCell.parentId) {
      const hasRowChildrens = hasChildren(rows, row)
      foundChevronCell.hasChildren = hasRowChildrens
      if (hasRowChildrens) assignIndentAndHasChildren(rows, row)
    }
    return row
  })

export default function CadastroCustos() {
  // eslint-disable-next-line no-unused-vars
  const [columns, setColumns] = useState(() => dataColumns(true, true))
  const [rows, setRows] = useState(() =>
    buildTree(dataRows(true, handleAddSubrow)),
  )
  const [rowsToRender, setRowsToRender] = useState<Row[]>([
    ...getExpandedRows(rows),
  ])
  // eslint-disable-next-line no-unused-vars
  const [updateCount, setUpdateCount] = useState(0)

  useEffect(() => {
    // Use useEffect para lidar com efeitos colaterais de mudanças de estado
    recalculateTotals(rows)
  }, [rows])

  function getNextRowId(rows: Row[]): number {
    let maxId = 0
    rows.forEach((row) => {
      // Converte o rowId para um número, independentemente de ser string ou número
      const rowIdNum =
        typeof row.rowId === 'number' ? row.rowId : parseInt(row.rowId, 10)

      if (rowIdNum > maxId) {
        maxId = rowIdNum
      }
    })
    return maxId + 1
  }
  type CustomTextCell = TextCell & {
    parentId?: number
  }
  type CustomCell = CustomTextCell | ChevronCell
  type CustomRow = Row<CustomCell>

  const categoryNames: { [key: string]: string } = {
    '1': 'COGS',
    '2': 'S&M',
    '3': 'R&D',
    '4': 'G&A',
  }

  const handleAddSubrow = (parentId: number) => {
    const newRowId = getNextRowId(rows)
    const siblingRows = rows.filter((row) =>
      row.cells.some(
        (cell) => cell.type === 'chevron' && cell.parentId === parentId,
      ),
    )
    const lastSiblingRow = siblingRows[siblingRows.length - 1]
    const lastSiblingIndex = rows.indexOf(lastSiblingRow)
    const insertIndex =
      lastSiblingIndex >= 0
        ? lastSiblingIndex + 1
        : rows.findIndex((row) => row.rowId === parentId) + 1
    const nextItemNumber = siblingRows.length + 1
    const categoryName = categoryNames[parentId]

    // Cria células vazias para quaisquer colunas adicionadas anteriormente, exceto as 2 primeiras que já são fornecidas.
    const emptyCellsForNewColumns = columns
      .slice(2) // assumindo que as duas primeiras colunas são padrão
      .map(() =>
        styledNonEditableTextCell(
          formatCurrency('0'),
          '#FFFFFF',
          '#000000',
          false,
        ),
      )

    const newSubrow: CustomRow = {
      rowId: newRowId,
      height: 25,
      reorderable: true,
      cells: [
        {
          type: 'chevron',
          text: `${categoryName} item ${nextItemNumber}`,
          isExpanded: true,
          parentId: parentId,
        } as CustomCell,
        {
          type: 'text',
          text: formatCurrency('0'),
        } as CustomCell,
        ...emptyCellsForNewColumns,
      ],
    }

    const newRows = [...rows]
    newRows.splice(insertIndex, 0, newSubrow)
    setRows(buildTree(newRows))
    setRowsToRender([...getExpandedRows(newRows)])
    console.log('New Subrow:', newSubrow)
  }

  const handleAddColumn = () => {
    console.log('handleAddColumn chamada')

    // Incrementa o número de colunas baseado no comprimento do array de colunas
    const nextColumnNumber = columns.length

    // Cria um ID para a nova coluna baseado no número da coluna
    const nextDateColumnId = `date-${nextColumnNumber}`
    const newColumn = {
      columnId: nextDateColumnId,
      reorderable: true,
      resizable: true,
      width: 120,
    }

    // Adiciona a nova coluna ao estado de colunas
    setColumns((prevColumns) => [...prevColumns, newColumn])

    // Ajusta a data para a nova coluna
    const newDate = new Date()
    newDate.setDate(newDate.getDate() + nextColumnNumber)
    let formattedDate = formatDate2(newDate.toISOString().slice(0, 10))

    // Verifica se a data está corretamente formatada e não é NaN/NaN/NaN.
    if (!formattedDate || formattedDate.includes('NaN')) {
      // Se houver um erro na formatação da data, corrige para um valor padrão.
      formattedDate = 'Data Inválida' // Substitua por um valor padrão ou mensagem de erro conforme necessário.
    }

    // Adiciona a nova célula de data na linha de cabeçalho e outras linhas
    setRows((prevRows) => {
      return prevRows.map((row, index) => {
        // Adiciona a nova célula de texto
        const newTextCell = styledTextCell(
          index === 0 ? formattedDate : formatCurrency('0'),
          index === 0
            ? '#FFFFFF'
            : row.cells[0].type === 'chevron' &&
              row.cells[0].parentId === undefined
            ? '#8FADF9'
            : '#FFFFFF',
          '#000000',
          index === 0
            ? false
            : row.cells[0].type === 'chevron' &&
                row.cells[0].parentId === undefined,
        )
        // Retorna a linha com a nova célula adicionada
        return { ...row, cells: [...row.cells, newTextCell] }
      })
    })

    // Atualiza as linhas para renderizar
    setRowsToRender(getExpandedRows(rows))
  }

  const handleChanges = (changes: CellChange[]) => {
    const newRows = [...rows]

    changes.forEach((change) => {
      const { rowId, columnId, newCell } = change
      if (rowId === '1' && columnId === 'text') {
        // Não atualize a célula se ela pertencer à linha com rowId '1' e à coluna 'text'
        return
      }
      const rowIndex = newRows.findIndex((row) => row.rowId === rowId)
      const columnIndex = columns.findIndex(
        (column) => column.columnId === columnId,
      )
      if (rowIndex > -1 && columnIndex > -1) {
        newRows[rowIndex].cells[columnIndex] = newCell
      }
    })
    recalculateTotals(newRows)
    setRows(newRows)
    setRowsToRender([...getExpandedRows(newRows)])
  }

  const extractNumericValue = (formattedValue: string) => {
    // Remova o símbolo da moeda e os separadores de milhar
    let valueWithoutCurrency = formattedValue.replace('R$', '').trim()
    valueWithoutCurrency = valueWithoutCurrency.replace(/\./g, '') // Remove pontos que podem ser separadores de milhar
    valueWithoutCurrency = valueWithoutCurrency.replace(',', '.') // Converte vírgula em ponto para decimais

    const numericValue = parseFloat(valueWithoutCurrency)
    return isNaN(numericValue) ? 0 : numericValue
  }

  const recalculateTotals = (rowsToUpdate: any) => {
    // Categorias para as quais os totais devem ser calculados
    const categories = ['Total COGS', 'Total S&M', 'Total R&D', 'Total G&A']

    categories.forEach((category) => {
      const totalRow = rowsToUpdate.find(
        (row: any) =>
          row.cells[0].type === 'chevron' && row.cells[0].text === category,
      )
      if (!totalRow) return

      const total = rowsToUpdate.reduce((sum: any, row: any) => {
        const chevronCell = row.cells[0]
        if (
          chevronCell.type === 'chevron' &&
          chevronCell.parentId === totalRow.rowId
        ) {
          const valueCell = row.cells.find((cell: any) => cell.type === 'text')
          const numericValue = extractNumericValue(valueCell.text)
          return sum + (numericValue || 0)
        }
        return sum
      }, 0)

      const totalCell = totalRow.cells.find((cell: any) => cell.type === 'text')
      if (totalCell) {
        totalCell.text = formatCurrency(total)
      }
    })

    rowsToUpdate.forEach((row: any) => {
      if (row.rowId === 'header') return // Pula o cabeçalho

      const isTotalRow =
        row.cells[0].type === 'chevron' && row.cells[0].parentId === undefined
      if (!isTotalRow) return // Pula as linhas que não são totais

      for (let i = 1; i < row.cells.length; i++) {
        // Começa no índice 1, que é após a célula do chevron
        const total = rowsToUpdate.reduce((sum: number, childRow: any) => {
          const chevronCell = childRow.cells[0]
          if (
            chevronCell.type === 'chevron' &&
            chevronCell.parentId === row.rowId
          ) {
            const valueCell = childRow.cells[i]
            const numericValue = extractNumericValue(valueCell.text)
            return sum + numericValue
          }
          return sum
        }, 0)

        row.cells[i].text = formatCurrency(total)
      }
    })

    setRows(rowsToUpdate)
    setRowsToRender([...getExpandedRows(rowsToUpdate)])
  }

  const handleColumnResize = (columnId: any, width: any) => {
    setColumns((prevColumns) => {
      return prevColumns.map((col) => {
        if (col.columnId === columnId) {
          return { ...col, width } // set the new width
        }
        return col
      })
    })
  }

  return (
    <>
      <h1 className="text-[#4b4b4b] text-[24px] font-semibold flex items-center justify-start">
        Fonte de dados
      </h1>
      <div className="flex flex-col gap-4 text-[16px]">
        <p className="text-[#000000] font-semibold">
          Conecte uma fonte de dados
        </p>
        <p className="text-[#4B4B4B] font-medium">
          Adicione aqui os seus custos operacionais para que você possa
          visualizar algumas métricas como S&M Expense vs New Margin, Cash
          Balance, COGS...
        </p>
        <div className="left flex flex-col w-fit gap-2">
          <button
            className="px-2 py-1 bg-[#4563FF] text-white rounded-[8px] font-semibold text-[14px] transition duration-500"
            onClick={() => handleAddSubrow(1)}
          >
            COGS: <span className="font-medium">adicionar item </span>
          </button>
          <button
            className="px-2 py-1 bg-[#4563FF] text-white rounded-[8px] font-semibold text-[14px] transition duration-500"
            onClick={() => handleAddSubrow(2)}
          >
            S&M: <span className="font-medium">adicionar item </span>
          </button>
          <button
            className="px-2 py-1 bg-[#4563FF] text-white rounded-[8px] font-semibold text-[14px] transition duration-500"
            onClick={() => handleAddSubrow(3)}
          >
            R&D: <span className="font-medium">adicionar item </span>
          </button>
          <button
            className="px-2 py-1 bg-[#4563FF] text-white rounded-[8px] font-semibold text-[14px] transition duration-500"
            onClick={() => handleAddSubrow(4)}
          >
            G&A: <span className="font-medium">adicionar item </span>
          </button>
        </div>
        <button
          className="px-2 py-1 bg-[#4563FF] text-white rounded-[8px] font-semibold text-[14px] transition duration-500"
          onClick={handleAddColumn}
        >
          Adicionar Coluna
        </button>

        <div className="bg-white font-medium shadow-lg rounded-lg react-grid-container">
          <ReactGrid
            key={updateCount}
            rows={rowsToRender}
            columns={columns}
            onCellsChanged={handleChanges}
            onColumnResized={handleColumnResize}
            enableRowSelection
            enableColumnSelection
          />
        </div>
      </div>
    </>
  )
}

import { Column } from '@silevis/reactgrid'

export const columns = (reorderable: boolean, resizable: boolean): Column[] => [
  { columnId: 'chevron', reorderable, resizable, width: 150 },
  { columnId: 'text1', reorderable, resizable, width: 120 },
]

import { Row, TextCell, CellStyle, ChevronCell } from '@silevis/reactgrid'
import { formatCurrency } from '../../utils/func/formatCurrency'
import { formatDate } from '../../utils/func/formatDate2'

const height = 25

const defaultDateValue = new Date()
const formattedDefaultDateValue = formatDate(defaultDateValue)

const styledNonEditableChevronCell = (
  text: string,
  backgroundColor: string,
  textColor: string,
  parentId?: number,
): ChevronCell => ({
  type: 'chevron',
  text,
  isExpanded: true,
  parentId: parentId,
  style: {
    backgroundColor,
    color: textColor,
    fontWeight: 'bold',
  } as CellStyle,
})

export const styledNonEditableTextCell = (
  text: string,
  backgroundColor: string,
  textColor: string,
  isBold: boolean = true,
): TextCell => ({
  type: 'text',
  text,
  style: {
    backgroundColor,
    color: textColor,
    fontWeight: isBold ? 'bold' : 'medium',
  } as CellStyle,
})

export const styledTextCell = (
  text: string,
  backgroundColor: string,
  textColor: string,
  isBold: boolean = true,
): TextCell => ({
  type: 'text',
  text,
  style: {
    backgroundColor,
    color: textColor,
    fontWeight: isBold ? 'bold' : 'medium',
  } as CellStyle,
})

export const rows = (
  reorderable: boolean,
  handleAddSubrow: (parentId: number) => void,
): Row[] => [
  {
    rowId: 'header',
    reorderable: false, // Normalmente, cabeçalhos não são reordenáveis
    height,
    cells: [
      styledTextCell('', '#ffffff', '#000000', false),
      styledTextCell(formattedDefaultDateValue, '#ffffff', '#000000', false),
    ],
  },
  {
    rowId: 1,
    height,
    reorderable,
    cells: [
      styledNonEditableChevronCell('Total COGS', '#8FADF9', '#000000'),
      styledNonEditableTextCell(formatCurrency('0'), '#8FADF9', '#000000'),
    ],
  },
  {
    rowId: 15,
    height,
    reorderable,
    cells: [
      { type: 'chevron', text: 'COGS item 1', isExpanded: true, parentId: 1 },
      { type: 'text', text: formatCurrency('0') },
    ],
  },
  /* {
    rowId: 3,
    height,
    reorderable,
    cells: [
      { type: 'chevron', text: '+ Novo item', isExpanded: true, parentId: 1 },
      { type: 'add', text: '', onClick: () => handleAddSubrow(1) },
    ],
  }, */
  {
    rowId: 2,
    height,
    reorderable,
    cells: [
      styledNonEditableChevronCell('Total S&M', '#8FADF9', '#000000'),
      styledNonEditableTextCell(formatCurrency('0'), '#8FADF9', '#000000'),
    ],
  },
  {
    rowId: 5,
    height,
    reorderable,
    cells: [
      { type: 'chevron', text: 'S&M item 1', isExpanded: true, parentId: 2 },
      { type: 'text', text: formatCurrency('0') },
    ],
  },
  /* {
    rowId: 6,
    height,
    reorderable,
    cells: [
      { type: 'chevron', text: '+ Novo item', isExpanded: true, parentId: 4 },
      { type: 'text', text: '' },
    ],
  }, */
  {
    rowId: 3,
    height,
    reorderable,
    cells: [
      styledNonEditableChevronCell('Total R&D', '#8FADF9', '#000000'),
      styledNonEditableTextCell(formatCurrency('0'), '#8FADF9', '#000000'),
    ],
  },
  {
    rowId: 8,
    height,
    reorderable,
    cells: [
      { type: 'chevron', text: 'R&D item 1', isExpanded: true, parentId: 3 },
      { type: 'text', text: formatCurrency('0') },
    ],
  },
  /* {
    rowId: 10,
    height,
    reorderable,
    cells: [
      { type: 'chevron', text: '+ Novo item', isExpanded: true, parentId: 7 },
      { type: 'text', text: '' },
    ],
  },  */
  {
    rowId: 4,
    height,
    reorderable,
    cells: [
      styledNonEditableChevronCell('Total G&A', '#8FADF9', '#000000'),
      styledNonEditableTextCell(formatCurrency('0'), '#8FADF9', '#000000'),
    ],
  },
  {
    rowId: 12,
    height,
    reorderable,
    cells: [
      { type: 'chevron', text: 'G&A item 1', isExpanded: true, parentId: 4 },
      { type: 'text', text: formatCurrency('0') },
    ],
  },
  /* {
    rowId: 14,
    height,
    reorderable,
    cells: [
      { type: 'chevron', text: '+ Novo item', isExpanded: true, parentId: 11 },
      { type: 'text', text: '' },
    ],
  }, */
]

[Michota]

This discussion was moved to this issue: #279