added examples.md

Author: ngduc

README.md

@@ -44,6 +44,7 @@ import { ReactTabulator } from 'react-tabulator'; // for React 15.x, use import
 
 - Code Example: [/src/ReactTabulatorExample.tsx](/src/ReactTabulatorExample.tsx)
 - Code Example (React 15.x): [Codesandbox](https://codesandbox.io/s/0mwpy612xw?module=/src/components/Home.js)
+- [More Codesandbox Examples](/docs/examples.md)
 
 ### 🔧 Commands
 

TODO.md

@@ -5,13 +5,15 @@ React Tabulator
 ### Todo
 
 - [ ] example for Add Row  
+- [ ] add / generate more types  
 
 ### In Progress
 
 - [ ] upgrade dependencies  
 
 ### Done ✓
 
+- [x] add more Codesandbox examples  
 - [x] capture a GIF demo  
 - [x] remove date-fns  
 - [x] add TODO.md  

docs/examples.md

@@ -0,0 +1,12 @@
+# Examples
+
+React-tabulator version may not be the latest in these examples.
+
+- Code Example: [/src/ReactTabulatorExample.tsx](/src/ReactTabulatorExample.tsx)
+- Code Example (React 15.x): [Codesandbox](https://codesandbox.io/s/0mwpy612xw?module=/src/components/Home.js)
+
+Columns:
+- Dynamically set columns - [Link](https://codesandbox.io/s/react-tabulator-examples-6ldg3?file=/src/components/Home.js)
+
+Data:
+- Dropdown to filter table data - [Link](https://codesandbox.io/s/react-tabulator-examples-vs7vq?file=/src/components/Home.js)

lib/ConfigUtils.js

@@ -10,7 +10,7 @@ exports.propsToOptions = function (props) {
         'resizableColumns', 'resizableRows', 'autoResize', 'tooltips', 'tooltipsHeader', 'tooltipGenerationMode',
         'initialSort', 'initialFilter', 'initialHeaderFilter', 'footerElement', 'index', 'keybindings', 'clipboard', 'clipboardCopyStyled',
         'clipboardCopySelector', 'clipboardCopyFormatter', 'clipboardCopyHeader', 'clipboardPasteParser',
-        'clipboardPasteAction', 'rowFormatter', 'placeholder'];
+        'clipboardPasteAction', 'rowFormatter', 'placeholder', 'selectable'];
     for (var _i = 0, defaultOptions_1 = defaultOptions; _i < defaultOptions_1.length; _i++) {
         var opt = defaultOptions_1[_i];
         if (typeof props[opt] !== 'undefined') {

lib/ReactTabulatorExample.js

@@ -70,6 +70,7 @@ var editableColumns = [
     {
         title: 'Pets',
         field: 'pets',
+        sorter: function (a, b) { return a.toString().localeCompare(b.toString()); },
         editor: MultiSelectEditor_1["default"],
         editorParams: { values: petOptions },
         formatter: MultiValueFormatter_1["default"],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tabulator",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "React Tabulator is based on tabulator - a JS table library with many advanced features.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/ConfigUtils.tsx

@@ -120,7 +120,7 @@ export const propsToOptions = (props: any) => {
   'resizableColumns', 'resizableRows', 'autoResize', 'tooltips', 'tooltipsHeader', 'tooltipGenerationMode',
   'initialSort', 'initialFilter', 'initialHeaderFilter', 'footerElement', 'index', 'keybindings', 'clipboard', 'clipboardCopyStyled',
   'clipboardCopySelector', 'clipboardCopyFormatter', 'clipboardCopyHeader', 'clipboardPasteParser',
-  'clipboardPasteAction', 'rowFormatter', 'placeholder']
+  'clipboardPasteAction', 'rowFormatter', 'placeholder', 'selectable']
 
   for (const opt of defaultOptions) {
     if (typeof props[opt] !== 'undefined') {

src/ReactTabulatorExample.tsx

@@ -59,6 +59,7 @@ const editableColumns = [
   {
     title: 'Pets',
     field: 'pets',
+    sorter: (a: string[], b: string[]) => a.toString().localeCompare(b.toString()),
     editor: MultiSelectEditor,
     editorParams: { values: petOptions },
     formatter: MultiValueFormatter,