How use react with datatable editor

pig800509

I can use react with datatables.
npm i jquery datatable.net

const $ = require('jquery');
$.DataTable = require( 'datatables.net' );

but I can't use editor,
npm i datatables.net-editor

import editor from 'datatables.net-editor';
or
require('datatables.net-editor');
always get error

how to use datatable editor with react
can you give a simple example?

allan

Editor isn't available on npm I'm afraid as npm doesn't really work for commercial packages (at least not as far as I can tell, and their support haven't replied to any questions I've asked about it in the past).

What you need to do is have the Editor Javascript and CSS files locally on your file system and to import editor from './vendors/editor/js/datatables.editor'; (or similar, depending on the path you use).

Allan

pig800509

how to use Foundation editor?

tangerine

A simple Forum search for "Foundation" finds numerous references.

allan

Use the download builder. It will build the package for you with Zurb Foundation styling.

Allan

pig800509

@allan

require( 'datatables.net-zf' )();
require( 'datatables.net-editor-zf' )();
require( 'datatables.net-buttons-zf' )();
require( 'datatables.net-colreorder-zf' )();
require( 'datatables.net-fixedheader-zf' )();
require( 'datatables.net-responsive-zf' )();
require( 'datatables.net-rowgroup-zf' )();
require( 'datatables.net-select-zf' )();

Module not found: Can't resolve 'datatables.net-colreorder-zf' in '/home/ted/Desktop/WHQproject/src/containers'
Module not found: Can't resolve 'datatables.net-fixedheader-zf' in '/home/ted/Desktop/WHQproject/src/containers'
Module not found: Can't resolve 'datatables.net-rowgroup-zf' in '/home/ted/Desktop/WHQproject/src/containers'
Module not found: Can't resolve 'datatables.net-select-zf' in '/home/ted/Desktop/WHQproject/src/containers'

what is wrong?

allan

Did you npm/yarn install them? Those packages do exist.

Allan

pig800509

@allan , yes I have ,those package are in /node_modules/
but only these four packages have error.

allan

Ah - I see the issue. Those packages don't have any Javascript to load that is specific to Zurb. They've only got CSS in them. What to do is to drop the -zf part from those packages for the moment. I'll publish updates which will include a simple loader for those packages to make them all consistent.

Thanks for pointing that out.

Allan

contact@soilfish.co

index.bundle.js:75122 Uncaught ReferenceError: jQuery is not defined
at index.bundle.js:75122
at Object.<anonymous> (index.bundle.js:73657)
at ./public/Editor/js/dataTables.editor.js (index.bundle.js:73658)

allan

Without more information, I can only guess that jQuery hasn't been included.

Allan

contact@soilfish.co

@allan

already include

import React, { Component } from 'react';
import jQuery from 'jquery';
import Datatable from 'datatables.net';
import editor from '../../../../public/Editor/js/dataTables.editor.js';

allan

Can you show me the code around line 75122 in your index.bundle.js - I'm not sure what would cause that. Also, what is your output module style - amd or SystemJS?

Allan