ReactGrid

https://silevis.github.io/reactgrid/docs/5.0/
Admin
ReactGrid is a data grid component for React applications, providing features for displaying,...
Tokens:22,178
Snippets:95
Trust Score:8.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Implement custom fill handle logic

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/5-fill-handle

A complete example demonstrating data structure, cell generation, and the ReactGrid component setup for custom fill handle logic.

```javascript
const peopleData = [
  {
    id: "66d61077035753f369ddbb16",
    name: "Jordan Rodriquez",
    age: 30,
    email: "jordanrodriquez@cincyr.com",
    company: "Zaggles",
  },
  {
    id: "66d61077794e7949ab167fd5",
    email: "allysonrios@satiance.com",
    name: "Allyson Rios",
    age: 30,
    company: "Zoxy",
  },
  {
    id: "66d61077dd754e88981ae434",
    name: "Pickett Lucas",
    age: 25,
    email: "pickettlucas@zoxy.com",
    company: "Techade",
  },
  {
    id: "66d61077115e2f8748c334d9",
    name: "Louella David",
    age: 37,
    email: "louelladavid@techade.com",
    company: "Ginkogene",
  },
  {
    id: "66d61077540d53374b427e4b",
    name: "Tricia Greene",
    age: 27,
    email: "triciagreene@ginkogene.com",
    company: "Naxdis",
  },
];

const cellStyles = {
  header: {
    backgroundColor: "#55bc71",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
  },
};

const getRows = (people: Person[]): Row[] => [
  // header row
  {
    rowIndex: 0,
    height: 40,
  },
  // data rows
  ...people.map((_, i) => ({
    rowIndex: i + 1,
    height: 40,
  })),
];

const getColumns = (): Column[] => [
  { colIndex: 0, width: 220 },
  { colIndex: 1, width: 220 },
  { colIndex: 2, width: 220 },
  { colIndex: 3, width: 220 },
];

type UpdatePerson = <T>(id: string, key: string, newValue: T) => void;

const generateCells = (people: Person[], updatePerson: UpdatePerson): Cell[] => {
  const generateHeaderCells = () => {
    const titles = ["Name", "Age", "Email", "Company"];

    return titles.map((title, colIndex) => ({
      rowIndex: 0,
      colIndex,
      Template: NonEditableCell,
      props: {
        value: title,
        style: cellStyles.header,
      },
    }));
  };

  const generateRowCells = (rowIndex: number, person: Person): Cell[] => {
    const { id, name, age, email, company } = person;

    return [
      {
        rowIndex,
        colIndex: 0,
        Template: TextCell,
        props: {
          text: name,
          onTextChanged: (newText: string) => updatePerson(id, "name", newText),
        },
      },
      {
        rowIndex,
        colIndex: 1,
        Template: NumberCell,
        props: {
          value: age,
          onValueChanged: (newValue: number) => updatePerson(id, "age", newValue),
        },
      },
      {
        rowIndex,
        colIndex: 2,
        Template: TextCell,
        props: {
          text: email,
          onTextChanged: (newText: string) => updatePerson(id, "email", newText),
        },
      },
      {
        rowIndex,
        colIndex: 3,
        Template: TextCell,
        props: {
          text: company,
          onTextChanged: (newText: string) => updatePerson(id, "company", newText),
        },
      },
    ];
  };

  const headerCells = generateHeaderCells();
  const rowCells = people.flatMap((person, idx) => generateRowCells(idx + 1, person));
  return [...headerCells, ...rowCells];
};

const ReactGridExample = () => {
  const [people, setPeople] = useState(peopleData);

  const updatePerson = (id, key, newValue) => {
    setPeople((prev) => {
      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
    });
  };

  const rows = getRows(people);
  const [columns, setColumns] = useState(getColumns());
  const cells = generateCells(people, updatePerson);
```

--------------------------------

### Install ReactGrid via NPM

Source: https://silevis.github.io/reactgrid/docs/5.0/1-getting-started

Use this command to install the ReactGrid package in your project.

```bash
npm i @silevis/reactgrid@alpha
```

--------------------------------

### Implement ReactGrid with Aggregation

Source: https://silevis.github.io/reactgrid/docs/5.0/1-getting-started

This example demonstrates configuring a grid with custom styles, data aggregation, and editable cells.

```javascript
const styledRanges = [
  {
    range: { start: { rowIndex: 0, columnIndex: 1 }, end: { rowIndex: 1, columnIndex: 4 } },
    styles: { background: "#55bc71", color: "white" },
  },
  {
    range: { start: { rowIndex: 1, columnIndex: 0 }, end: { rowIndex: 4, columnIndex: 1 } },
    styles: { background: "#55bc71", color: "white" },
  },
  {
    range: { start: { rowIndex: 0, columnIndex: 0 }, end: { rowIndex: 1, columnIndex: 1 } },
    styles: { background: "#318146", color: "white" },
  },
  {
    range: { start: { rowIndex: 3, columnIndex: 1 }, end: { rowIndex: 4, columnIndex: 4 } },
    styles: { background: "#f8f8f8" },
  },
  {
    range: { start: { rowIndex: 1, columnIndex: 3 }, end: { rowIndex: 3, columnIndex: 4 } },
    styles: { background: "#f8f8f8" },
  },
];

const ReactGridExample = () => {
    const [yearsData, setYearsData] = useState([
    { label: "2023", values: [1, 3] },
    { label: "2024", values: [2, 4] },
  ]);

  // [{ label: "2023", values: [1, 3, 4] }, { label: "2024", values: [2, 4, 6] }]
  const yearsDataWithTotals = yearsData.map((year) => ({
    ...year,
    values: [...year.values, year.values.reduce((sum, value) => sum + value, 0)],
  }));

  // { label: "Sum", values: [3, 7, 10] }
  const summaryRow = {
    label: "Sum",
    values: yearsDataWithTotals.reduce(
      (sum, year) => sum.map((currentSum, index) => currentSum + year.values[index]),
      [0, 0, 0]
    ),
  };

  const cells: Cell[] = [
    // Header cells
    { rowIndex: 0, colIndex: 0, Template: NonEditableCell, props: { value: "" } },
    { rowIndex: 0, colIndex: 1, Template: NonEditableCell, props: { value: "H1" } },
    { rowIndex: 0, colIndex: 2, Template: NonEditableCell, props: { value: "H2" } },
    { rowIndex: 0, colIndex: 3, Template: NonEditableCell, props: { value: "Total" } },
    // Year data cells
    ...yearsDataWithTotals
      .map((year, rowIndex) => [
        { rowIndex: rowIndex + 1, colIndex: 0, Template: NonEditableCell, props: { value: year.label } },
        ...year.values.map((value, colIndex) => {
          // Last column is not editable
          const isEditable = colIndex + 1 !== year.values.length; 
          return {
            rowIndex: rowIndex + 1,
            colIndex: colIndex + 1,
            Template: !isEditable ? NonEditableCell : NumberCell,
            props: {
              value,
              ...(isEditable && {
                onValueChanged: (newValue) => {
                  setYearsData((prev) => {
                    const updatedYears = [...prev];
                    updatedYears[rowIndex].values[colIndex] = newValue;
                    return updatedYears;
                  });
                },
              }),
            },
          };
        }),
      ])
      .flat(),
    // Summary row
    {
      rowIndex: yearsDataWithTotals.length + 1,
      colIndex: 0,
      Template: NonEditableCell,
      props: { value: summaryRow.label },
    },
    ...summaryRow.values.map((value, colIndex) => ({
      rowIndex: yearsDataWithTotals.length + 1,
      colIndex: colIndex + 1,
      Template: NonEditableCell,
      props: { value },
    })),
  ];

  return <ReactGrid cells={cells} styledRanges={styledRanges} />;
};

render(<ReactGridExample />, document.getElementById("root"));
```

--------------------------------

### Reordering implementation example

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/9-column-and-row-reordering

A complete example demonstrating data structures, row reordering logic, and column reordering logic.

```typescript
const peopleData = [
  {
    id: "66d61077035753f369ddbb16",
    name: "Jordan Rodriquez",
    age: 30,
    email: "jordanrodriquez@cincyr.com",
    company: "Zaggles",
    position: 1,
  },
  {
    id: "66d61077794e7949ab167fd5",
    email: "allysonrios@satiance.com",
    name: "Allyson Rios",
    age: 30,
    company: "Zoxy",
    position: 2,
  },
  {
    id: "66d61077dd754e88981ae434",
    name: "Pickett Lucas",
    age: 25,
    email: "pickettlucas@zoxy.com",
    company: "Techade",
    position: 3,
  },
  {
    id: "66d61077115e2f8748c334d9",
    name: "Louella David",
    age: 37,
    email: "louelladavid@techade.com",
    company: "Ginkogene",
    position: 4,
  },
  {
    id: "66d61077540d53374b427e4b",
    name: "Tricia Greene",
    age: 27,
    email: "triciagreene@ginkogene.com",
    company: "Naxdis",
    position: 5,
  },
];

const cellStyles = {
  header: {
    backgroundColor: "#55bc71",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
  },
};

const getRows = (people: Person[]): Row[] => [
  // header row
  {
    rowIndex: 0,
    height: 40,
    reorderable: false,
  },
  // data rows
  ...people.map((_, i) => ({
    rowIndex: i + 1,
    height: 40,
  })),
];

type ColumnDef = {
  colIndex: number;
  width: string | number;
  title: string;
  minWidth?: string | number;
  resizable?: boolean;
  reorderable?: boolean;
};

// Columns with fields 'title' will be used for column reordering
const getColumns = (): ColumnDef[] => [
  { colIndex: 0, width: 220, title: "Name" },
  { colIndex: 1, width: 220, title: "Age" },
  { colIndex: 2, width: 220, title: "Email" },
  { colIndex: 3, width: 220, title: "Company" },
];

const handleRowReorder = (
  peopleData: Person[],
  selectedRowIndexes: number[],
  destinationRowIdx: number,
  updatePerson: (id: string, key: string, newValue: number) => void
) => {
  const prevPeopleData = [...peopleData].sort((a, b) => a.position - b.position);

  // Adjust the destination index to account for the header row
  const adjustedDestinationIdx = destinationRowIdx - 1;
  const adjustedSelectedRowIdxs = selectedRowIndexes.map((rowIdx) => rowIdx - 1);

  const isReorderingUpwards = adjustedSelectedRowIdxs.some((rowIdx) => rowIdx > adjustedDestinationIdx);

  adjustedSelectedRowIdxs.forEach((rowIdx, index) => {
    if (adjustedDestinationIdx === 0) {
      prevPeopleData[rowIdx].position = prevPeopleData[adjustedDestinationIdx].position / 2 + index * 0.0001;
    } else if (adjustedDestinationIdx === peopleData.length - 1) {
      prevPeopleData[rowIdx].position = prevPeopleData[adjustedDestinationIdx].position + 1 + index * 0.0001;
    } else if (isReorderingUpwards) {
      prevPeopleData[rowIdx].position =
        (prevPeopleData[adjustedDestinationIdx].position + prevPeopleData[adjustedDestinationIdx - 1].position) / 2 +
        index * 0.0001;
    } else {
      prevPeopleData[rowIdx].position =
        (prevPeopleData[adjustedDestinationIdx].position + prevPeopleData[adjustedDestinationIdx + 1].position) / 2 +
        index * 0.0001;
    }
  });

  prevPeopleData.forEach((row) => {
    updatePerson(row.id, "position", row.position);
  });
};

const handleColumnReorder = (
  selectedColIndexes: number[],
  destinationColIdx: number,
  setColumns: React.Dispatch<React.SetStateAction<ColumnDef[]>>
) => {
  setColumns((prevColumns) => {
    // Filter out the selected columns and unselected columns
    const selectedColumns = prevColumns.filter((_, index) => selectedColIndexes.includes(index));
    const unselectedColumns = prevColumns.filter((_, index) => !selectedColIndexes.includes(index));

    // Adjust the destination index based on the direction of the reorder
    const adjustedDestinationColIdx =
      selectedColIndexes[0] > destinationColIdx ? destinationColIdx : destinationColIdx - selectedColumns.length + 1;

    // Create the new columns array with reordered columns
    const newColumns = [
      ...unselectedColumns.slice(0, adjustedDestinationColIdx),
      ...selectedColumns,
      ...unselectedColumns.slice(adjustedDestinationColIdx),
    ];

    return newColumns;
  });
};

type UpdatePerson = <T>(id: string, key: string, newValue: T) => void;
```

--------------------------------

### Implement ReactGrid with styledRanges

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/6-styled-ranges

A complete example demonstrating data preparation, cell generation, and the application of styledRanges to a ReactGrid component.

```javascript
const peopleData = [
  {
    id: "66d61077035753f369ddbb16",
    name: "Jordan Rodriquez",
    age: 30,
    email: "jordanrodriquez@cincyr.com",
    company: "Zaggles",
  },
  {
    id: "66d61077794e7949ab167fd5",
    email: "allysonrios@satiance.com",
    name: "Allyson Rios",
    age: 30,
    company: "Zoxy",
  },
  {
    id: "66d61077dd754e88981ae434",
    name: "Pickett Lucas",
    age: 25,
    email: "pickettlucas@zoxy.com",
    company: "Techade",
  },
  {
    id: "66d61077115e2f8748c334d9",
    name: "Louella David",
    age: 37,
    email: "louelladavid@techade.com",
    company: "Ginkogene",
  },
  {
    id: "66d61077540d53374b427e4b",
    name: "Tricia Greene",
    age: 27,
    email: "triciagreene@ginkogene.com",
    company: "Naxdis",
  },
];

const cellStyles = {
  header: {
    backgroundColor: "#55bc71",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
  },
};

const getRows = (people: Person[]): Row[] => [
  // header row
  {
    rowIndex: 0,
    height: 40,
  },
  // data rows
  ...people.map((_, i) => ({
    rowIndex: i + 1,
    height: 40,
  })),
];

const getColumns = (): Column[] => [
  { colIndex: 0, width: 220 },
  { colIndex: 1, width: 220 },
  { colIndex: 2, width: 220 },
  { colIndex: 3, width: 220 },
];

type UpdatePerson = <T>(id: string, key: string, newValue: T) => void;

const generateCells = (people: Person[], updatePerson: UpdatePerson): Cell[] => {
  const generateHeaderCells = () => {
    const titles = ["Name", "Age", "Email", "Company"];

    return titles.map((title, colIndex) => ({
      rowIndex: 0,
      colIndex,
      Template: NonEditableCell,
      props: {
        value: title,
        style: cellStyles.header,
      },
    }));
  };

  const generateRowCells = (rowIndex: number, person: Person): Cell[] => {
    const { id, name, age, email, company } = person;

    return [
      {
        rowIndex,
        colIndex: 0,
        Template: TextCell,
        props: {
          text: name,
          onTextChanged: (newText: string) => updatePerson(id, "name", newText),
        },
      },
      {
        rowIndex,
        colIndex: 1,
        Template: NumberCell,
        props: {
          value: age,
          onValueChanged: (newValue: number) => updatePerson(id, "age", newValue),
        },
      },
      {
        rowIndex,
        colIndex: 2,
        Template: TextCell,
        props: {
          text: email,
          onTextChanged: (newText: string) => updatePerson(id, "email", newText),
        },
      },
      {
        rowIndex,
        colIndex: 3,
        Template: TextCell,
        props: {
          text: company,
          onTextChanged: (newText: string) => updatePerson(id, "company", newText),
        },
      },
    ];
  };

  const headerCells = generateHeaderCells();
  const rowCells = people.flatMap((person, idx) => generateRowCells(idx + 1, person));
  return [...headerCells, ...rowCells];
};

const ReactGridExample = () => {
  const [people, setPeople] = useState(peopleData);

  const updatePerson = (id, key, newValue) => {
    setPeople((prev) => {
      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
    });
  };

  const rows = getRows(people);
  const [columns, setColumns] = useState(getColumns());
  const cells = generateCells(people, updatePerson);

  return (
    <div>
      <ReactGrid
        rows={rows}
        columns={columns}
        cells={cells}
        styledRanges={styledRanges}
      />
    </div>
  );
};

const styledRanges = [
  {
    range: { start: { rowIndex: 3, columnIndex: 2 }, end: { rowIndex: 5, columnIndex: 3 } },
    styles: { background: "red", color: "white" },
  },
];

render(<ReactGridExample />, document.getElementById("root"));
```

--------------------------------

### Data and Cell Configuration for ReactGrid

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/10-copy-cut-paste

Setup for sample data, row/column definitions, and cell generation logic used in a ReactGrid implementation.

```typescript
const peopleData = [
  {
    id: "66d61077035753f369ddbb16",
    name: "Jordan Rodriquez",
    age: 30,
    email: "jordanrodriquez@cincyr.com",
    company: "Zaggles",
  },
  {
    id: "66d61077794e7949ab167fd5",
    email: "allysonrios@satiance.com",
    name: "Allyson Rios",
    age: 30,
    company: "Zoxy",
  },
  {
    id: "66d61077dd754e88981ae434",
    name: "Pickett Lucas",
    age: 25,
    email: "pickettlucas@zoxy.com",
    company: "Techade",
  },
  {
    id: "66d61077115e2f8748c334d9",
    name: "Louella David",
    age: 37,
    email: "louelladavid@techade.com",
    company: "Ginkogene",
  },
  {
    id: "66d61077540d53374b427e4b",
    name: "Tricia Greene",
    age: 27,
    email: "triciagreene@ginkogene.com",
    company: "Naxdis",
  },
];

const cellStyles = {
  header: {
    backgroundColor: "#55bc71",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
  },
};

const getRows = (people: Person[]): Row[] => [
  // header row
  {
    rowIndex: 0,
    height: 40,
  },
  // data rows
  ...people.map((_, i) => ({
    rowIndex: i + 1,
    height: 40,
  })),
];

const getColumns = (): Column[] => [
  { colIndex: 0, width: 220 },
  { colIndex: 1, width: 220 },
  { colIndex: 2, width: 220 },
  { colIndex: 3, width: 220 },
];

type UpdatePerson = <T>(id: string, key: string, newValue: T) => void;

const generateCells = (people: Person[], updatePerson: UpdatePerson): Cell[] => {
  const generateHeaderCells = () => {
    const titles = ["Name", "Age", "Email", "Company"];

    return titles.map((title, colIndex) => ({
      rowIndex: 0,
      colIndex,
      Template: NonEditableCell,
      props: {
        value: title,
        style: cellStyles.header,
      },
    }));
  };

  const generateRowCells = (rowIndex: number, person: Person): Cell[] => {
    const { id, name, age, email, company } = person;

    return [
      {
        rowIndex,
        colIndex: 0,
        Template: TextCell,
        props: {
          text: name,
          onTextChanged: (newText: string) => updatePerson(id, "name", newText),
        },
      },
      {
        rowIndex,
        colIndex: 1,
        Template: NumberCell,
        props: {
          value: age,
          onValueChanged: (newValue: number) => updatePerson(id, "age", newValue),
        },
      },
      {
        rowIndex,
        colIndex: 2,
        Template: TextCell,
        props: {
          text: email,
          onTextChanged: (newText: string) => updatePerson(id, "email", newText),
        },
      },
      {
        rowIndex,
        colIndex: 3,
        Template: TextCell,
        props: {
          text: company,
          onTextChanged: (newText: string) => updatePerson(id, "company", newText),
        },
      },
    ];
  };
```

--------------------------------

### ReactGrid Clipboard Integration

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/10-copy-cut-paste

Example of integrating clipboard event handlers into the ReactGrid component and initializing the grid API.

```typescript
  const headerCells = generateHeaderCells();
  const rowCells = people.flatMap((person, idx) => generateRowCells(idx + 1, person));
  return [...headerCells, ...rowCells];
};

const ReactGridExample = () => {
  const [people, setPeople] = useState(peopleData);

  const updatePerson = (id, key, newValue) => {
    setPeople((prev) => {
      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
    });
  };

  const rows = getRows(people);
  const columns = getColumns();
  const cells = generateCells(people, updatePerson);

  const gridAPI = useReactGridAPI("cut-copy-paste-example");

  return (
    <div>
      <ReactGrid
        id="cut-copy-paste-example"
        rows={rows}
        columns={columns}
        cells={cells}
        onCut={(event, cellsRange, cellsLookup) => handleCut(event, cellsRange, cellsLookup)}
        onCopy={(event, cellsRange, cellsLookup) => handleCopy(event, cellsRange, cellsLookup)}
        onPaste={(event, cellsRange, cellsLookup) => handlePaste(event, cellsRange, cellsLookup, gridAPI)}
      />
    </div>
  );
};
```

--------------------------------

### Custom DateCell template implementation

Source: https://silevis.github.io/reactgrid/docs/5.0/4-create-your-own-cell-template

A complete example of a custom DateCell template using CellWrapper and useCellContext.

```typescript
const peopleData = [
  {
    id: "66d61077035753f369ddbb16",
    name: "Jordan Rodriquez",
    birth: moment("1991-01-01"),
    email: "jordanrodriquez@cincyr.com",
    company: "Zaggles",
  },
  {
    id: "66d61077794e7949ab167fd5",
    email: "allysonrios@satiance.com",
    name: "Allyson Rios",
    birth: moment("1991-01-01"),
    company: "Zoxy",
  },
  {
    id: "66d61077dd754e88981ae434",
    name: "Pickett Lucas",
    birth: moment("1996-01-01"),
    email: "pickettlucas@zoxy.com",
    company: "Techade",
  },
  {
    id: "66d61077115e2f8748c334d9",
    name: "Louella David",
    birth: moment("1984-01-01"),
    email: "louelladavid@techade.com",
    company: "Ginkogene",
  },
  {
    id: "66d61077540d53374b427e4b",
    name: "Tricia Greene",
    birth: moment("1994-01-01"),
    email: "triciagreene@ginkogene.com",
    company: "Naxdis",
  },
];

interface DateCellProps {
    value: Moment;
    onValueChanged: (data: Moment) => void;
}

const DateCell: FC<DateCellProps> = ({ value, onValueChanged }) => {
    const ctx = useCellContext();
    const targetInputRef = useRef<HTMLInputElement>(null);
    const [isEditMode, setEditMode] = useState(false);

    let formattedDate: string | undefined;

    if (!value) {
        formattedDate = "";
    } else {
        formattedDate = value.format("DD-MM-YYYY");
    }

    return (
        <CellWrapper
            onStringValueRequested={() => value.toDate().toDateString()}
            onStringValueReceived={(v) => onValueChanged?.(moment(v))}
            style={{ padding: ".2rem", textAlign: "center", outline: "none" }}
            onDoubleClick={() => {
                ctx.isFocused && setEditMode(true);
            }}
            onKeyDown={(e) => {
                if (!isEditMode && e.key === "Enter") {
                    e.stopPropagation();
                    setEditMode(true);
                }
            }}
        >
            {isEditMode ? (
                <input
                    className="rg-input"
                    type="date"
                    defaultValue={value.format("YYYY-MM-DD")}
                    onBlur={(e) => {
                        const changedDate = e.currentTarget.value;
                        changedDate && onValueChanged(moment(e.currentTarget.value));
                        setEditMode(false);
                    }}
                    onPointerDown={(e) => e.stopPropagation()}
                    onKeyDown={(e) => {
                        if (e.key === "Escape") {
                            setEditMode(false);
                        } else if (e.key === "Enter") {
                            onValueChanged(moment(e.currentTarget.value));
                            setEditMode(false);
                        }
                    }}
                    autoFocus
                    ref={targetInputRef}
                />
            ) : (
                formattedDate
            )}
        </CellWrapper>
    );
};

const cellStyles = {
  header: {
    backgroundColor: "#55bc71",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
  },
};

const getRows = (people: Person[]): Row[] => [
  // header row
  {
    rowIndex: 0,
    height: 40,
  },
  // data rows
  ...people.map((_, i) => ({
    rowIndex: i + 1,
    height: 40,
  })),
];

const getColumns = (): Column[] => [
  { colIndex: 0, width: 220 },
  { colIndex: 1, width: 220 },
  { colIndex: 2, width: 220 },
  { colIndex: 3, width: 220 },
];

type UpdatePerson = <T>(id: string, key: string, newValue: T) => void;
```

--------------------------------

### Implementing onFillHandle Callback

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/5-fill-handle

This example shows the ReactGrid component configuration and the logic for the onFillHandle function to propagate values based on a selected range.

```typescript
  return (
    <div>
      <ReactGrid
        rows={rows}
        columns={columns}
        cells={cells}
        onFillHandle={handleFill}
        stickyLeftColumns={1}
      />
    </div>
  );
};

const handleFill = (
  selectedArea: NumericalRange,
  fillRange: NumericalRange,
  cellsLookup: CellsLookup
): boolean => {
  // Check if the fill handle is being dragged upwards
  const isFillingUpwards = fillRange.startRowIdx < selectedArea.startRowIdx;
  // Calculate the number of rows and columns in the selected area
  const relativeRowSize = selectedArea.endRowIdx - selectedArea.startRowIdx;
  const relativeColSize = selectedArea.endColIdx - selectedArea.startColIdx;

  // Iterate over the rows and columns in the fill range
  for (let i = fillRange.startRowIdx; i < fillRange.endRowIdx; i++) {
    for (let j = fillRange.startColIdx; j < fillRange.endColIdx; j++) {
      const currentCellCallbacks = cellsLookup.get(`${i} ${j}`);

      if (!currentCellCallbacks) continue;

      // Skip cells of type 'header'
      if (i === 0) continue;

      // Calculate the relative row and column indices within the selected area
      const relativeRowIdx = isFillingUpwards
        ? (selectedArea.endRowIdx - i - 1) % relativeRowSize
        : (i - fillRange.startRowIdx) % relativeRowSize;
      const relativeColIdx = (j - fillRange.startColIdx) % relativeColSize;

      // Get the value from the cell in the selected area that corresponds to the relative row and column indices
      const sourceCellCallbacks = cellsLookup.get(
        `${selectedArea.startRowIdx + relativeRowIdx} ${selectedArea.startColIdx + relativeColIdx}`
      );

      if (sourceCellCallbacks) {
        const newValue = sourceCellCallbacks.onStringValueRequested();
        currentCellCallbacks.onStringValueReceived(newValue);
      }
    }
  }

  // Override the default fill handle behavior
  return true;
};

render(<ReactGridExample />, document.getElementById("root"));
```

--------------------------------

### Setting initial focus via ReactGrid property

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/1-initial-focus-location

Configure the starting focused cell by passing the initialFocusLocation prop to the ReactGrid component.

```jsx
<ReactGrid
  cells={cells}
  rows={rows}
  columns={columns}
  initialFocusLocation={{ rowIndex: 2, colIndex: 1 }}
/>
```

--------------------------------

### Implementing Sticky Columns in ReactGrid

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/4-sticky

This example demonstrates how to define grid data, rows, columns, and cells, and apply the stickyLeftColumns property to the ReactGrid component.

```typescript
const peopleData = [
  {
    id: "66d61077035753f369ddbb16",
    name: "Jordan Rodriquez",
    age: 30,
    email: "jordanrodriquez@cincyr.com",
    company: "Zaggles",
  },
  {
    id: "66d61077794e7949ab167fd5",
    email: "allysonrios@satiance.com",
    name: "Allyson Rios",
    age: 30,
    company: "Zoxy",
  },
  {
    id: "66d61077dd754e88981ae434",
    name: "Pickett Lucas",
    age: 25,
    email: "pickettlucas@zoxy.com",
    company: "Techade",
  },
  {
    id: "66d61077115e2f8748c334d9",
    name: "Louella David",
    age: 37,
    email: "louelladavid@techade.com",
    company: "Ginkogene",
  },
  {
    id: "66d61077540d53374b427e4b",
    name: "Tricia Greene",
    age: 27,
    email: "triciagreene@ginkogene.com",
    company: "Naxdis",
  },
];

const cellStyles = {
  header: {
    backgroundColor: "#55bc71",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
  },
};

const getRows = (people: Person[]): Row[] => [
  // header row
  {
    rowIndex: 0,
    height: 40,
  },
  // data rows
  ...people.map((_, i) => ({
    rowIndex: i + 1,
    height: 40,
  })),
];

const getColumns = (): Column[] => [
  { colIndex: 0, width: 220 },
  { colIndex: 1, width: 220 },
  { colIndex: 2, width: 220 },
  { colIndex: 3, width: 220 },
];

type UpdatePerson = <T>(id: string, key: string, newValue: T) => void;

const generateCells = (people: Person[], updatePerson: UpdatePerson): Cell[] => {
  const generateHeaderCells = () => {
    const titles = ["Name", "Age", "Email", "Company"];

    return titles.map((title, colIndex) => ({
      rowIndex: 0,
      colIndex,
      Template: NonEditableCell,
      props: {
        value: title,
        style: cellStyles.header,
      },
    }));
  };

  const generateRowCells = (rowIndex: number, person: Person): Cell[] => {
    const { id, name, age, email, company } = person;

    return [
      {
        rowIndex,
        colIndex: 0,
        Template: TextCell,
        props: {
          text: name,
          onTextChanged: (newText: string) => updatePerson(id, "name", newText),
        },
      },
      {
        rowIndex,
        colIndex: 1,
        Template: NumberCell,
        props: {
          value: age,
          onValueChanged: (newValue: number) => updatePerson(id, "age", newValue),
        },
      },
      {
        rowIndex,
        colIndex: 2,
        Template: TextCell,
        props: {
          text: email,
          onTextChanged: (newText: string) => updatePerson(id, "email", newText),
        },
      },
      {
        rowIndex,
        colIndex: 3,
        Template: TextCell,
        props: {
          text: company,
          onTextChanged: (newText: string) => updatePerson(id, "company", newText),
        },
      },
    ];
  };

  const headerCells = generateHeaderCells();
  const rowCells = people.flatMap((person, idx) => generateRowCells(idx + 1, person));
  return [...headerCells, ...rowCells];
};

const ReactGridExample = () => {
  const [people, setPeople] = useState(peopleData);

  const updatePerson = (id, key, newValue) => {
    setPeople((prev) => {
      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
    });
  };

  const rows = getRows(people);
  const [columns, setColumns] = useState(getColumns());
  const cells = generateCells(people, updatePerson);

  return (
    <div>
      <ReactGrid
        rows={rows}
        columns={columns}
        cells={cells}
        stickyLeftColumns={1}
      />
    </div>
  );
};

render(<ReactGridExample />, document.getElementById("root"));
```

--------------------------------

### ReactGrid Column Resizing Implementation

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/3-column-resizing

This example demonstrates how to define column widths, generate cells, and implement a resize handler to update the state of the ReactGrid component.

```typescript
const peopleData = [
  {
    id: "66d61077035753f369ddbb16",
    name: "Jordan Rodriquez",
    age: 30,
    email: "jordanrodriquez@cincyr.com",
    company: "Zaggles",
  },
  {
    id: "66d61077794e7949ab167fd5",
    email: "allysonrios@satiance.com",
    name: "Allyson Rios",
    age: 30,
    company: "Zoxy",
  },
  {
    id: "66d61077dd754e88981ae434",
    name: "Pickett Lucas",
    age: 25,
    email: "pickettlucas@zoxy.com",
    company: "Techade",
  },
  {
    id: "66d61077115e2f8748c334d9",
    name: "Louella David",
    age: 37,
    email: "louelladavid@techade.com",
    company: "Ginkogene",
  },
  {
    id: "66d61077540d53374b427e4b",
    name: "Tricia Greene",
    age: 27,
    email: "triciagreene@ginkogene.com",
    company: "Naxdis",
  },
];

const cellStyles = {
  header: {
    backgroundColor: "#55bc71",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
  },
};

const getRows = (people: Person[]): Row[] => [
  // header row
  {
    rowIndex: 0,
    height: 40,
  },
  // data rows
  ...people.map((_, i) => ({
    rowIndex: i + 1,
    height: 40,
  })),
];

const getColumns = (): Column[] => [
  { colIndex: 0, width: 220 },
  { colIndex: 1, width: 220 },
  { colIndex: 2, width: 220 },
  { colIndex: 3, width: 220 },
];

type UpdatePerson = <T>(id: string, key: string, newValue: T) => void;

const generateCells = (people: Person[], updatePerson: UpdatePerson): Cell[] => {
  const generateHeaderCells = () => {
    const titles = ["Name", "Age", "Email", "Company"];

    return titles.map((title, colIndex) => ({
      rowIndex: 0,
      colIndex,
      Template: NonEditableCell,
      props: {
        value: title,
        style: cellStyles.header,
      },
    }));
  };

  const generateRowCells = (rowIndex: number, person: Person): Cell[] => {
    const { id, name, age, email, company } = person;

    return [
      {
        rowIndex,
        colIndex: 0,
        Template: TextCell,
        props: {
          text: name,
          onTextChanged: (newText: string) => updatePerson(id, "name", newText),
        },
      },
      {
        rowIndex,
        colIndex: 1,
        Template: NumberCell,
        props: {
          value: age,
          onValueChanged: (newValue: number) => updatePerson(id, "age", newValue),
        },
      },
      {
        rowIndex,
        colIndex: 2,
        Template: TextCell,
        props: {
          text: email,
          onTextChanged: (newText: string) => updatePerson(id, "email", newText),
        },
      },
      {
        rowIndex,
        colIndex: 3,
        Template: TextCell,
        props: {
          text: company,
          onTextChanged: (newText: string) => updatePerson(id, "company", newText),
        },
      },
    ];
  };

  const headerCells = generateHeaderCells();
  const rowCells = people.flatMap((person, idx) => generateRowCells(idx + 1, person));
  return [...headerCells, ...rowCells];
};

const ReactGridExample = () => {
  const [people, setPeople] = useState(peopleData);

  const updatePerson = (id, key, newValue) => {
    setPeople((prev) => {
      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
    });
  };

  const rows = getRows(people);
  const [columns, setColumns] = useState(getColumns());
  const cells = generateCells(people, updatePerson);

  return (
    <div>
      <ReactGrid
        rows={rows}
        columns={columns}
        onResizeColumn={(width, columnIdx) => handleResizeColumn(width, columnIdx, setColumns)}
        cells={cells}
      />
    </div>
  );
};

const handleResizeColumn = (
  newWidth: number,
  columnIndexes: number[],
  setColumns: Dispatch<SetStateAction<Column[]>>
) => {
  setColumns((prevColumns) => {
    // If resizing spans multiple columns (e.g., header cells with colSpan > 1), divide the new width by the number of columns
    const newWidthPerColumn = columnIndexes.length > 1 ? newWidth / columnIndexes.length : newWidth;

    return prevColumns.map((column, idx) => {
      if (columnIndexes.includes(idx)) {
        return { ...column, width: newWidthPerColumn };
      }

      return column;
    });
  });
};


render(<ReactGridExample />, document.getElementById("root"));
```

--------------------------------

### Implement data change handling in ReactGrid

Source: https://silevis.github.io/reactgrid/docs/5.0/2-implementing-core-features/2-handling-changes

Example of managing state updates using cell change handlers to update the underlying data source.

```javascript
const peopleData = [
  {
    _id: "66d61077035753f369ddbb16",
    name: "Jordan Rodriquez",
    age: 30,
    email: "jordanrodriquez@cincyr.com",
    company: "Zaggles",
    position: 1,
  },
  {
    _id: "66d61077794e7949ab167fd5",
    email: "allysonrios@satiance.com",
    name: "Allyson Rios",
    age: 30,
    company: "Zoxy",
    position: 2,
  },
  {
    _id: "66d61077dd754e88981ae434",
    name: "Pickett Lucas",
    age: 25,
    email: "pickettlucas@zoxy.com",
    company: "Techade",
    position: 3,
  },
  {
    _id: "66d61077115e2f8748c334d9",
    name: "Louella David",
    age: 37,
    email: "louelladavid@techade.com",
    company: "Ginkogene",
    position: 4,
  },
  {
    _id: "66d61077540d53374b427e4b",
    name: "Tricia Greene",
    age: 27,
    email: "triciagreene@ginkogene.com",
    company: "Naxdis",
    position: 5,
  },
];
 
const ReactGridExample = () => {
  const [people, setPeople] = useState(peopleData);
 
  const updatePerson = (id, key, newValue) => {
    setPeople((prev) => {
      return prev.map((p) => (p.id === id ? { ...p, [key]: newValue } : p));
    });
  };
 
 
  const cells = [
    {
      rowIndex: 0,
      colIndex: 0,
      Template: TextCell;
      props: {
        text: people[0].name,
        onTextChanged: (newText) => {
          updatePerson(people[0]._id, "name", newText);
        },
      }
    },
    //...
  ];
 
 
 
  return <ReactGrid cells={cells} />;
};
```
Tokens:
Raw