GT-DYNAMIC-TABLE

This project is a library for a dynamic table component in React

The table should have the following possibilties:

1. sort data by column
2. filter data by column value
3. pin columns
4. unpin column
5. hide columns
6. show back the columns

The component gets the following data:

1. title - a text to be the title of the table
2. witdh - a string that contains the width of the table
3. style - a custom style for the table
4. a list of headers, each header is an object of: {property, text?}
5. a list of rows, each item is an object of: {data: {}, selectable?}
6. direction - the direction style for the table (ltr, rlt)
7. language - the languge for the context menu. you can select from the imported LANGUAGES variables
8. selectItems - the option to select a row from the table. it is an object of {select?, multiple?}
9. selectItem - the function that will be executed when an item is selected
10. contextmenuoptions - the options to have in the context menu

4. headers

an array of objects, each object has the following properties:

• property: the property name of the data object that will be in the headers column
• text - optional: the text that will be shown in the table header

5. rows

the rows ia an array of items. each item has the following properties :

• data: the object that is the table row. the object has the properties like the header. the value for the missing headers in the property, will be emty values.
• selecteable - optional: true or false, this value indicates if the row can be selected

6. direction

the direction of the table

7. language

the language of the context menu options. the table supports English and Hebrew

8. selectItems

the option to select rows in the table

• select: can be selected. when value is true, there will be a checkbox in each row that can be selected
• multiple: multiple selection option

9. selectItem

write a function to execute when an item is selected. the function gets from the DT an object with the following properties:

• checked: boolean value if the item is checked or not
• item: the item that is checked

10. contextmenuoptions

the options for the context menu

• PIN_RIGHT: 'pin right',
• PIN_LEFT: 'pin left',
• SUM: 'sum' - for numeric columns
• HIDE: 'hide',
• FILTER: 'filter' - for text columns

How to use the component

Component.jsx

import DynamicTable, {LANGUAGES, CONTEXT_MENU_OPTIONS } from 'gt-dynamic-table' 
import 'gt-dynamic-table/dist/style.css'
...

function App() {
  return <>
     <DynamicTable headers={[{property:'name', text:'user name'},{property: 'number', text:'count'}, {property:'downloads'}, {property:'location', text:'url'},{ property:'x'},{property: 'y'}]}
      rows={[{data:{ name: 'sara', number: 123, downloads: 5, location: 'http://start/sara', x: 56.789, y: 32.3334 }, selectable: true},
      {data:{ name: 'matilda', downloads: 3, number: 77, location: 'http://start/matilda', y: 76.898, x: 34.034 }, selectable: true},
      {data:{ name: 'bella', number: 62, downloads: 7, location: 'http://start/bella', x: 55.123 , y: 32.987 }, selectable: true},
      {data:{ name: 'tamara', number: 912 , downloads: 2, location: 'http://start/tamara' }, selectable: true},
      {data:{ name: 'keila' , number: 160 , downloads: 15 , location: 'http://start/keila' , x: 67.1123 , y: 54.074 }, selectable: false},
      {data:{ name: 'mina', number: 24, downloads: 8, location: 'http://start/mina' }, selectable: true},

      ]}
      selectItems={{select:true, multiple:false}}
      language={LANGUAGES.ENGLISH}
      contextmenuoptions={[CONTEXT_MENU_OPTIONS.FILTER,
      CONTEXT_MENU_OPTIONS.PIN_LEFT,
      CONTEXT_MENU_OPTIONS.SUM]}
       >

      </DynamicTable >
  </>

}