loon-bulma-react 2022.1.0 → 2022.1.1

package/README.md

@@ -461,12 +461,25 @@ import { ButtonGroup, Bttn, Button, LightButton, InvertedButton, OutlinedButton
 
 Een DataTable is een tabel met een maximaal aantal rijen waarin je kan zoeken en sorteren. Voor een gewone, saaie, normale tabel kan je de [Table](#component-table) gebruiken. Voor re-renderen van de tabel moet de `data`-prop wel state zijn, anders werkt het rerenderen niet. Hetzelfde geld voor de `columns`-prop.
 
+> #### LET OP!
+>
+> Het sorteren is aangepast. Om een column sorteerbaar te maken, moet je een van de onderstaande 4 waarden opgeven:
+>
+> - `'string'`: sorteer deze kolom alfabetisch
+> - `'boolean'`: sorteer deze kolom als een boolean (true/false)
+> - `'number'`: sorteer deze kolom numeriek
+> - `'function'`: sorteer deze kolom met deze `function`<sup>\*</sup>.
+>
+> <i> <sup>\*</sup>: Als deze kolom JSX-Elementen bevat, werkt het sorteren _NIET_. Dan _MOET_ er een sort-function worden opgegeven om wel te kunnen sorteren.</i>
+
 Om eigen classes toe te voegen aan rows en aan columns zijn er methodes:
 
 - op de DataTable props zit de `rowClasses` function voor classes op de `<tr>`.
 - op de DataTableColum props zit de `columnClasses` function voor classes op de `<td>`.
   De gebruikte classes kunnen in een globale css file of in een lokaal geïmporteerde file staan (zoals hieronder).
-  > LET OP: in combinatie met `isStriped: {true}` werkt het zetten van `background-color` ALLEEN in combinatie met `!important`. Anders wordt de achtergrondkleur weer overschreven door Bulma.
+  > #### LET OP!
+  >
+  > in combinatie met `isStriped: {true}` werkt het zetten van `background-color` ALLEEN in combinatie met `!important`. Anders wordt de achtergrondkleur weer overschreven door Bulma.
 
 ```css
 /** datatable.styles.css */
@@ -486,28 +499,28 @@ const nameSortFn = (a: any, b: any) => {
   const aNaam = a.first_name + ' ' + a.last_name;
   const bNaam = b.first_name + ' ' + b.last_name;
   if (aNaam < bNaam) return -1;
-  if (aNaam > bNaam) return 1;
-  return 0;
+  else if (aNaam > bNaam) return 1;
+  else return 0;
 };
 
-const dataTableHeaders = [
-  { sort: true, value: 'id' },
+const columns = [
+  { sort: 'number', value: 'id' },
   {
     header: 'Naam',
     sort: nameSortFn,
     value: (v: any) => `${v.first_name} ${v.last_name}`,
   },
-  { header: 'Voornaam', sort: true, value: 'first_name' },
-  { header: 'Achternaam', sort: true, value: 'last_name' },
+  { header: 'Voornaam', sort: 'string', value: 'first_name' },
+  { header: 'Achternaam', sort: 'string', value: 'last_name' },
   {
     value: 'email',
     columnClasses: (usr) => (usr.email.includes('.com') ? 'is-marked' : ''),
   },
-  { header: 'Geslacht', sort: true, value: 'gender' },
-  { header: 'Taal', sort: true, value: 'language' },
+  { header: 'Active', sort: 'boolean', value: 'is_active'}
+  { header: 'Geslacht', sort: 'string', value: 'gender' },
+  { header: 'Taal', sort: 'string', value: 'language' },
   {
     header: '',
-    sort: false,
     value: () => <InvertedButton.Danger>DEL</InvertedButton.Danger>,
   },
 ];
@@ -525,6 +538,11 @@ export function DataTableTab() {
   return (
     <DataTable
       data={data}
+      headerContent={
+        <Button.Primary>Add</Button.Primary>
+        <Button.Warning>Change</Button.Warning>
+        <Button.Success>Refresh</Button.Success>
+      }
       columns={columns}
       onRowSelected={(i, r) => handleRowClick(i, r)}
       rowClasses={(item: IUser) => (item.first_name.startsWith('C') ? 'is-dangerous' : '')}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loon-bulma-react",
-  "version": "2022.1.0",
+  "version": "2022.1.1",
   "description": "Bulma & ReactJS componenten voor Loon Salarissoftware",
   "author": "timroos1990",
   "license": "MIT",