Last month we had our Innovation Delivery hack day where the whole team had fun developing small projects outside of their usual everyday work. For our project we wanted to explore React JS, in particular creating a React JS table component and open-sourcing it. You can see the results here.
We have recently started using React JS at Oxford Computer Consultants (OCC) for a major redevelopment of our core social care finance product – called ContrOCC – that allows local authorities to manage care contracts and budgets. After some research into various javascript frameworks and libraries, we settled on React JS. It allows us to target key UI components that require a richer user experience whilst keeping the core of our development as MVC.
The single most important UI component for any finance application is the table, and this is no different for ContrOCC. Our table not only renders data but allows users to search, filter and sort through it. We originally planned to use one of the many React JS open-source table components available, such as Facebook’s Fixed Data Tables or Allen Fang’s React-Bootstrap-Table, but couldn’t find any that quite matched our needs. We thought that we couldn’t be alone in this and decided to open-source our work in the hope that someone else might find it useful.
After creating our basic table, for our hack day we wanted to add expandable rows to show extra data and allow users to edit column’s visibility to see only the most relevant information for their needs. We used React JS, ES6, Webpack and Lodash library to create our component, and then found the Jest Unit test framework from Facebook to help us make sure it was ready for primetime. We used Github, Github pages and the Tachyons CSS framework to quickly and easily create a landing page. Also, check out our cool animation in the header!
After 7 hours working on this component, our conclusion is that React JS is a great library, it’s easy to pick up compared to AngularJS, and it’s powerful enough to allow us to quickly build multi-functional components. We’d love people to expand upon and contribute to the work we’ve started, so head on over to our Github repo to grab the code!