Add additional header row with letters

client/components/Editors/Table/columns.tsx

@@ -1,6 +1,7 @@
 import LightTooltip from '../../Parts/Tooltips/Light'
 import * as helpers from '../../../helpers'
 import * as types from '../../../types'
+import { createGroups } from './groups'
 
 // TODO: remove colors hard-coding
 // TODO: use proper InovuaDatagrid types
@@ -30,8 +31,11 @@ export function createColumns(
     },
   }
 
+  // Using groups to add the headers with the letters of the alphabet
+  const groups = createGroups(schema.fields.length)
+
   const dataColumns = []
-  for (const field of schema.fields) {
+  for (const [index, field] of schema.fields.entries()) {
     // TODO: fix this on ther server side -- schema should not have hidden fields
     // Otherwise the _rowNumber and _rowValid are displayed on the table
     if (field.name === '_rowNumber' || field.name === '_rowValid') continue
@@ -46,6 +50,7 @@ export function createColumns(
       name: field.name,
       header,
       type: ['integer', 'number'].includes(field.type) ? 'number' : 'string',
+      group: groups[index].name,
       headerProps:
         field.name in errorIndex.label
           ? { style: { color: 'white', background: 'red' } }

client/components/Editors/Table/groups.tsx

@@ -0,0 +1,41 @@
+interface Group {
+  name: string
+  header: string
+}
+
+export function createGroups(columnsAmount: number): Array<Group> {
+  // Generate an array with letters from the latin alphabet
+  const letterACode = 'A'.charCodeAt(0)
+  const totalLettersAlphabet = 26
+
+  const columnLabelsArray = []
+  let index1, index2
+
+  for (index1 = 0; index1 < totalLettersAlphabet; index1++) {
+    columnLabelsArray.push(String.fromCharCode(letterACode + index1))
+  }
+  for (index1 = 0; index1 < totalLettersAlphabet; index1++) {
+    for (index2 = 0; index2 < totalLettersAlphabet; index2++) {
+      if (columnLabelsArray.length === columnsAmount) {
+        break
+      }
+      columnLabelsArray.push(
+        String.fromCharCode(letterACode + index1) +
+          String.fromCharCode(letterACode + index2)
+      )
+    }
+  }
+
+  const groups: Array<Group> = []
+
+  columnLabelsArray.forEach((letter) => {
+    const letterEntry = {
+      name: letter,
+      header: letter,
+      headerStyle: { textAlign: 'center' },
+    }
+    groups.push(letterEntry)
+  })
+
+  return groups
+}

client/components/Editors/Table/index.tsx

@@ -7,6 +7,7 @@ import InovuaDatagrid from '@inovua/reactdatagrid-community'
 import { TypeDataGridProps } from '@inovua/reactdatagrid-community/types'
 import { TypeComputedProps } from '@inovua/reactdatagrid-community/types'
 import { createColumns } from './columns'
+import { createGroups } from './groups'
 import * as settings from './settings'
 import * as types from '../../../types'
 import debounce from 'lodash/debounce'
@@ -30,6 +31,8 @@ export default function TableEditor(props: TableEditorProps) {
 
   const [rowHeight] = React.useState(40)
 
+  const groups = createGroups(columns.length - 1)
+
   React.useEffect(() => {
     const debouncedHandleResize = debounce(function handleResize() {
       resizeTable()
@@ -59,6 +62,7 @@ export default function TableEditor(props: TableEditorProps) {
       dataSource={source}
       columns={columns}
       pagination={true}
+      groups={groups}
       loadingText={<Typography>Loading...</Typography>}
       renderLoadMask={LoadMask}
       defaultActiveCell={settings.DEFAULT_ACTIVE_CELL}