params.json

{"name":"Tabletable","tagline":"Simple reactjs Table","body":"# tabletable\r\n\r\n## React Simple Table\r\ntabletable is a simple table component written purely in React. It is the result of my frustrations with Griddle and other React tables that are overly prescriptive in how they must be used and make things very difficult to customize and integrate into complex applications.\r\n\r\ntabletable takes any sort of data structure and allows you to define your columns' markup and data projections as you like. It is also server-side rendering friendly.\r\n\r\ntabletable has some limitations that I hope to address in the future:\r\n- It requires an Immutablejs data structure for its data\r\n- It emits some hardcoded bootstrap styling\r\n- Only pager markup can be switched out for a custom component\r\n\r\nIf you are interested in helping with any of this, I would gladly take pull requests.\r\n\r\n## Using it\r\nTo use tabletable:\r\n- Install the component through NPM\r\n- Require it\r\n- Pass it an Immutablejs Sequence of rows, a column definition object, and an optional filter handler.\r\n\r\n### Component props\r\ntabletable has the following component props:\r\n\r\n#### Required\r\n**data [Immutable.Seq]** - structured source data.\r\n\r\n**columns [object]** - column definition object.\r\n\r\n#### Optional\r\n**rowsPerPage [number]** - number of rows to display per page.\r\n\r\n**pagerSize [number]** - number pages to display in pager.\r\n\r\n**showPager [bool]** - show/hide the pager.\r\n\r\n**showFilter [bool]** - show/hide the filter input.\r\n\r\n**pager [React.Component]** - pager component to use in place of default pager.\r\n\r\n**onFilterAction [func(filterValue: string)]** - callback function for responding to filter input.\r\n\r\n**filterValue [string]** - text to display in search filter.\r\n\r\n**rowContext [func(row: object, index: number): Object]** - callback function invoked once per row with row and index arguments and returns an object. This object will be passed to the column definition object. It is intended to alleviate situations where identical expensive computations need to be performed for more than one column.\r\n\r\n**rowCssClass [string]** - CSS class(es) to use for row (tr) element.\r\n\r\n### Column definition options\r\nColumn definitions are a flexible way to get some fairly complex behaviors into the table while also allowing the *shape* of the data to be however you prefer. Each column defines a function that receives the row data and index as arguments and returns a React component that displays the content. This means that you can drive complex behaviors from the state and props of the parent component. The properties available in the definition objects are:\r\n\r\n#### Required\r\n**data [func(row: object, index: number)]** - a function that transforms the row data into a React component to be displayed.\r\n\r\n#### Optional\r\n**display [string]** - Header value for column. If not defined, the property name for the column object will be used instead.\r\n\r\n**headerCssClass [string]** - CSS class(es) to use for header column (th) element.\r\n\r\n**elementCssClass [string]** - CSS class(es) to use for row column (td) element.\r\n\r\n**visible [bool]** - show/hide the column.\r\n\r\n### Contrived Example\r\n    let columnDefs = {\r\n      index: {\r\n          display: 'Index',\r\n          headerCssClass: 'col-sm-1',\r\n          visible: true,\r\n          data: (row,index,context) => <div>{index}</div>,\r\n      },\r\n      name: {\r\n          display: 'Name',\r\n          headerCssClass: 'col-sm-10',\r\n          data: row => <div>{row.get('name')}</div>,\r\n      },\r\n      timestamp: {\r\n          display: 'Created',\r\n          headerCssClass: 'col-sm-1',\r\n          data: row => <div>{row.get('timestamp')}</div>,\r\n      },\r\n    };\r\n\r\n\r\n     handleFilterAction(filterValue) {\r\n        console.log('Filter value is: ' + filterValue);\r\n     },\r\n\r\n\r\n     <Tabletable\r\n        data={myCrazyCustomImmutablejsDataStructure}\r\n        columns={columnDefs}\r\n        onFilterAction={handleFilterAction}\r\n     />\r\n\r\nTo change pager attributes:\r\n\r\n     <Tabletable\r\n        data={myCrazyCustomImmutablejsDataStructure}\r\n        columns={columnDefs}\r\n        onFilterAction={handleFilterAction}\r\n        rowsPerPage={100}\r\n        pagerSize={5}\r\n     />\r\n\r\nYou can also define a custom pager that will be substituted for the default pager:\r\n\r\n     MyCustomPager = require('./mycustompager');\r\n\r\n     <Tabletable\r\n        data={myCrazyCustomImmutablejsDataStructure}\r\n        columns={columnDefs}\r\n        onFilterAction={handleFilterAction}\r\n        pager={MyCustomPager}\r\n    />\r\n\r\nThe custom pager needs to behave similarly and accept the same props as the default pager. I suggest you copy src/Pager.jsx and modify to suit your needs.\r\n\r\n## Contributing\r\nFirst, setup your local environment:\r\n\r\n    git clone git@github.com:ZeroarcSoftware/tabletable.git\r\n    cd tabletable\r\n    npm install\r\n\r\nNext, build the project (for use in a npm link scenario):\r\n\r\n    npm run build\r\n\r\nTo watch for changes:\r\n\r\n    npm run watch\r\n\r\n## Issues\r\nIssues are tracked in [Github Issues](https://github.com/ZeroarcSoftware/tabletable/issues)\r\n\r\n## Changes\r\nChanges are tracked as [Github Releases](https://github.com/ZeroarcSoftware/tabletable/releases)\r\n\r\n","google":"UA-63369739-2","note":"Don't delete this file! It's used internally to help with page regeneration."}