This is javascript package that depends on datatables and works with trk_datatables gem
Here is example demo Rails application https://github.com/trkin/trk_datatables_demo
This package is using following npm packages:
- datarangepicker https://github.com/dangrossman/daterangepicker
- multiple-select https://github.com/wenzhixin/multiple-select
- tristate https://github.com/vanderlee/tristate
Find on https://github.com/trkin/trk_datatables#installation
Somehow it needs provided jquery plugin even it does not load another instance
of jquery (note that when you use yarn link trk_datatables it loads two
jqueries so do not assume that yarn link is the same as node_modules).
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}));
module.exports = environment
Look for example test/support/server_side.html and run yarn build to
generate dist/index.js.
<!-- test/support/server_side.html -->
<script type="text/javascript" src="./../../dist/index.js"></script>
<table data-datatable='true' data-datatable-ajax-url='http://localhost:3004/clubs/search.json' id='myTable'>
</table>
<script>
trkDatatables(window, $).initialise()
</script>
You can search for passedOptions to see which parameters you can change:
- language
- dateRangePickerDateFormat and dateRangePickerDateTimeFormat
To run test you can
# run all test files
yarn test
# run single
node node_modules/.bin/jest --runInBand test/initialise.test.js
You can open sample with
yarn start
# open examples in dist
gnome-open http://localhost:8081/dist/client_side.html
gnome-open http://localhost:8081/dist/server_side.html
To test on a project locally use file: protocol since yarn link gives error
that
Module not found: Error: Can't resolve 'jquery' in ...
When you update the package, to trigger recompile you need to run on rails project
yarn upgrade trk_datatables
# edit some js file to trigger webpack
Here is a link usage just for reference
# in this folder (trk_datatables package folder)
yarn link
# to see links
ls -la ~/.config/yarn/link
# in usage folder (rails folder)
rm -rf node_modules/trk_datatables
yarn link trk_datatables
# this will create link node_modules/trk_datatables ->
# ../../../.config/yarn/link/trk_datatables which points to
# ~/javascript/trk_datatables
# when you are done, you should use npm version, not local
yarn unlink trk_datatables
yarn add trk_datatables
Also to debug on Rails app, you can put debugger here in src/index.js and
change (simply add new line) app/javascript/packs/application.js to triger
webpack rebuild.
For icons we used http://fontello.com/ npm install fontello-cli -g and open a
page:
fontello-cli --config fontello/config.json open
You can download package and extract to /fontello or you can download
config.json and copy and install (in this case it will not update demo.html)
cp ~/Downloads/config.json fontello/
fontello-cli --config fontello/config.json install
To see local previews you can also
gnome-open fontello/demo.html
Release new version by updating version in package.json and push
npm publish