If you're already familiar with React and you need to write a Data Table component but have no time, please feel free to use and modify the one that I've written.
Screen Shots:
With expand/collapse row enabled:
Click Here for the Working Demo.
Click Here for the Source Code.
Sample Snippet on how to use the data table: (Complete examples - JSX and non JSX codes)
- ...
- <script type="text/jsx">
- var selectItemHandler = function(o) {
- // Row selection handler here
- };
- var locationRenderCallback = function(data) {
- ...
- };
- var colDef = [{title:"Area Name", key:"areaName"},
- {title:"Property Type", key:"propertyType"},
- {title:"Property Name", key:"propertyName"},
- {title:"Address", key:"addr"},
- {title:"Zip Code", key:"zip"},
- {title:"Phone Number", key:"phone"},
- {title:"Management Company", key:"mgmtCompany"},
- {title:"Units", key:"units"},
- {title:"Location", key:"loc", renderCallback:locationRenderCallback, sortable:false},
- {key:"lat", isVisible:false},
- {key:"lon", isVisible:false}];
- var renderExpandedRowContent = function(data) {
- return <PicGallery title="Street view of the area..."
- lat={data.lat}
- lon={data.lon}/>;
- };
- React.render(<RDataTable colDefinitions={colDef}
- data={sampleJson}
- selectItemCallback={selectItemHandler}
- enableExpandCollapseRow={true}
- renderExpandedRowContent={renderExpandedRowContent}/>,
- document.getElementById("table-container”));
- </script>
- ...
- <div id="table-container" class="table-container"></div>