komarovalexander / ka-table

Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more
http://ka-table.com
MIT License
769 stars 56 forks source link

are async validations possible? #409

Closed barucAlmaguer closed 4 months ago

barucAlmaguer commented 4 months ago

Hi @komarovalexander ! Is it possible to add async validations to the table?

I understand it's possible to add validations with <Table {...props} validation={validationFunc} />

But as far as I see, it's a syncronous operation.

It would be great to be able to validate against a remote API, is it currently possible?

I have something like this in mind:

import {Table} from 'ka-table'
import { nameValidator } from './remoteValidators'

const nameValidation = async ({ rowData, value }): Promise<string | void> => {
  const validation = await nameValidator(rowData.id, value)
  if (!validation) return
  return validation
}

const validation = async ({column, rowData, value}) => {
  if (column.key === 'name') return await nameValidation({rowData, value}) 
  // other validations...
}

function Component () {
  const data = useData() // from an external data source
  return (
    <Table
      data={data}
      validation={validation}
    />
  )
}

This would help with validations in usecases where not all data is available locally, like with remote pagination And where we would like to inform user of incorrect data even before submission

barucAlmaguer commented 4 months ago

Another question related to validations, I'll put it here to avoid creating more issues, as is more of a general question:

What triggers the validations? I see the example at https://komarovalexander.github.io/ka-table/#/validation, and it works great, but when I implement on my own table a dummy "validation" function (always "ok", just console logging the params), it never triggers, even when I edit data in the table.

It's worth saying that I have implemented my custom table cells and editCells, so I may have missed something at the edit cells (Maybe I'm missing a dispatch(validate()) on cell editor onChange?)

barucAlmaguer commented 4 months ago

I'm guessing my assumption is correct (I need to validate myself if I have custom cells) I'm looking at the ka-table code, and it seems at CellEditor.tsx file that it either renders:

{content || (
    editingMode === EditingMode.Cell
        ? <CellEditorState {...props} dispatch={getCellEditorDispatchHandler(dispatch)} autoFocus={true}/>
        : <CellEditorState {...props} />
)}

so, it either renders my custom content, or the default behaviour, which handles the validation internally