Internationalization

Their are three part of DSG that involve i18n, row numbers, the "Add" button, and the context menu. Each one is customizable to you needs.

Row numbers

Simply override the component of the gutter column. You can then display anything based on the rowIndex prop.

import { CellProps } from 'react-datasheet-grid'

function CustomRowNumberComponent({ rowIndex }: CellProps) {
  return <>{new Intl.NumberFormat('fr-FR').format(rowIndex + 1)}</>
}

function App() {
  return (
    <DataSheetGrid
      gutterColumn={{
        component: <CustomRowNumberComponent/>
      }}
    />
  )
}

Add button

You can simply use the helper function createAddRowsComponent to only change the translation keys and pass it to the addRowsComponent prop:

import { createAddRowsComponent } from 'react-datasheet-grid'

const AddRows = createAddRowsComponent({
  button: 'Ajouter', // Add
  unit: 'lignes', // rows
})

function App() {
  return (
    <DataSheetGrid
      addRowsComponent={AddRows}
    />
  )
}

You may also write the entire component yourself to use your own buttons and inputs:

import { AddRowsComponentProps } from 'react-datasheet-grid'

function AddRows({ addRows }: AddRowsComponentProps) {
  // You can call addRows() or addRows(n) where n is the number of rows
  return /*...*/
}

function App() {
  return (
    <DataSheetGrid
      addRowsComponent={AddRows}
    />
  )
}

You can look at the default implementation to see how the built-in component works.

Context menu

You can simply use the helper function createContextMenuComponent to only change the translation keys and pass it to the contextMenuComponent prop:

import { createContextMenuComponent, ContextMenuItem } from 'react-datasheet-grid'

const ContextMenu = createContextMenuComponent((item: ContextMenuItem) => {
  if (item.type === 'DELETE_ROW') {
    return <>Delete row</>
  }
  
  /*...*/
})

function App() {
  return (
    <DataSheetGrid
      contextMenuComponent={ContextMenu}
    />
  )
}

You may also write the entire component yourself to use your own components:

import { ContextMenuComponentProps } from 'react-datasheet-grid'

function ContextMenu({ clientX, clientY, items, close, cursorIndex }: ContextMenuComponentProps) {
  return /*...*/
}

function App() {
  return (
    <DataSheetGrid
      contextMenuComponent={ContextMenu}
    />
  )
}

You can look at the default implementation to see how the built-in component works.