React-custable Alternatives

react-custable reviews and mentions

• A light react table package
  1 project | dev.to | 14 Aug 2022

  import { Table } from 'react-custable'; //the fieldName should be as same as data's key const column = [ { fieldName: 'name', title: 'Name', width: '180px', sortable: true }, { fieldName: 'email', title: 'Email', width: '180px', sortable: true }, ]; const data = [ { id: '1', name: 'name one', email: '[email protected]' }, { id: '2', name: 'name two', email: '[email protected]' }, ]; ; Enter fullscreen mode Exit fullscreen mode what's column props? the 'fieldName' is the key name of your data and 'title' is the table header for that data and these are mandatory. Optional column configuration width: you can assign certain width to each column sortable: this table can sort columns data if these are string sortFunc: if the column's data isn't string you can pass a function that knows how to sort your data. fixed: if you want to fixed the column for horizontal scroll (only work for first column or last column) render: if you want to render custom component, you should pass a function that get row (data of current row) and index (index of current row) and your function should return a Cell object { value: React.ReactNode, props: { [key: string]: string }, //props will be applied to td elemenet like colspan } Enter fullscreen mode Exit fullscreen mode As you've seen before 'data' and 'column' are mandatory for the table, let's see what are optional for the table Option Type Description fieldName* string data key title* string column header title width string(px) column width (Default is auto) fixed string ('left' or 'right') to fix column sortable boolean Default is false sortFunc ( a , b ) => number sort function should return -1 when a < b , 1 when a > b , 0 when a = b render (row, index) => Cell for rendering custom component in cell Option Type Description column* Column[] array of columns data* { id:string, ... }[] array of data isSelectable boolean to enable checkboxes for rows selectRowHandler (selectedRowIds) => void the callback function will receiver selected row IDs selectedRowKeys string[] default value for selected rows pagination { currentPage: number; totalCount: number; pageLimit: number; } values for table pagination pageChangeHandler (pageNumner: number) => void the callback for handle page changes rowClickHandler (row: Row) => void the callback for handle row click showLoading boolean show spinner over table Contribute this is the first version of my package, so feel free to contribute https://github.com/barzin144/react-custable