A React Data Table

This blog is about a web based data table written with Facebook React. Facebook React is a cool and fun way to create reusable UI components for the web using javascript. It lets the programmer focus on writing code on how to render the UI, give it state and leaves DOM manipulation to the framework. If you haven't used it yet, here's a very good guide on getting started with it.

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)

pop-upraw

...
<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>

...

<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>