reactdatatable

A CRUD data table for React. Supports the following functionalities:

• Rows automatically support read/edit mode
• Revert edit functionality
• Text, Select, and DateTime controls in edit mode
• Callbacks for create, read, update, and delete

Currently in dev and not ready for public use, but drop me a line at [email protected] if interested :)

Install

Requires React v16 due to constraints from dependent packages

npm install --save reactdatatable

Usage

Super bloated usage example, but it is what it is

import React from 'react'
import { 
  DataDateCell, 
  DataTextCell, 
  DataSelectCell, 
  DataTable,
  useRowEditor
} from 'reactdatatable'
import 'reactdatatable/dist/index.css'

const genres = [
  { key: 'default', value: '' },
  { key: 1, value: 'Historical Fiction' },
  { key: 2, value: 'Fantasy' },
  { key: 3, value: 'Gothic Fiction' }
]

const App = () => {
  const [books, setBooks] = React.useState(
    [
      { id: 1, name: 'The Great Gatsby', publishDate: '04/10/1925', genre: 1 },
      { id: 2, name: 'The Hobbit', publishDate: '09/21/1937', genre: 2 },
      { id: 3, name: 'The Picture of Dorian Gray', publishDate: '01/07/1890', genre: 3 }
    ]
  );

  const onSave = (row) => {
    const updatedBooks = row.state.dirtyValues;
    setBooks([...books].map(o => {
      if(o.id === updatedBooks.id) {
        if(updatedBooks.id === 'new') {
          updatedBooks.id = updatedBooks.name;
        }
        return {...o, ...updatedBooks}
      }
      else return o;
    }))
  }

  const onEdit = (row) => {
    console.log('Editing..');
  }

  const onRevert = (row) => {
    console.log('onRevert..');
  }

  const [ 
    initialRowEditState, 
    rowEdit, 
    rowSave, 
    rowRevert 
  ] = useRowEditor(
    (row) => {onEdit(row)},
    (row) => {onSave(row)},
    (row) => {onRevert(row)}
  )

  const columns = [
    {
      Header: 'Name',
      accessor: 'name',
      defaultValue: '',
      Cell: (cell) => {
        const validation = { required: true, message: 'Please enter a name' }
        return <DataTextCell cell={cell} accessor='name' validation={validation} />
      }
    },
    {
      Header: 'Publication Date',
      accessor: 'publishDate',
      defaultValue: '',
      Cell: (cell) => {
        return <DataDateCell cell={cell} accessor='publishDate' />
      }
    },
    {
      Header: 'Genre',
      accessor: 'genre',
      defaultValue: 'default',
      Cell: (cell) => {
        const validation = {
          required: true,
          defaultValue: 'default',
          message: 'Please select a genre'
        }
        return (
          <DataSelectCell 
            cell={cell} 
            accessor='genre' 
            items={genres} 
            validation={validation} 
          />
        )
      }
    },
    {
      accessor: 'id',
      defaultValue: 'new',
      Cell: (props) => {
        return(<div></div>);
      }
    },
  ]

  return (
      <DataTable 
        data={books} 
        columns={columns} 
        onSave={rowSave} 
        onEdit={rowEdit} 
        onRevert={rowRevert} 
        initialRowState={initialRowEditState}
        displayBlankRow={true}
      />
  )
}

export default App

License

MIT © jcape-gt