Hackathon has ended.
HotTable
This is an (minimal) Airtable clone. We left out any of the schema-building functionality and focused squarely on the data management functionality. Moreover, we pushed hard on using semantic HTML, so the table is an actual <table>. Within the space of data management, there are a surprising number of features however:
- Manage which fields are displayed
- Sort by any field in either direction (with multi-column sorting supported as well)
- Filter by any complex query you can imagine (nested ANDs and ORs supported with a full range of predicates)
- Group by any field (sorting in either direction, collapsing or expanding the grouped rows)
- Select rows (with clear visual indication of selected rows)
- Select all rows in the dataset (with clear visual indication of how many records are selected)
- Bulk export selected rows (with whatever display/sort/filter conditions are set on the view)
- Full pagination functionality (select number of items displayed per page, jump to a specific page, see the details of the pagination window)
- Column summaries (see information about the dataset for particular columns, with calculations based on the data-type of the column)
- X- and Y-axis scrollable table on overflow, with fixed headers, footers, and primary columns
- Quick sort, group, hide options for each column in a column header dropdown
- Inline editing of all table cells
- CRUD of views, saving your configuration of a particular combination of fields, sorts, filters, grouping, and pagination
HotTable
Berlin
![](https://secure.gravatar.com/avatar/684ecf738f6297edbf0baf1d8f9a73d3.png?default=mp&rating=pg&size=128)
![](https://secure.gravatar.com/avatar/181f6cd1105b6202785fbdb147fe874a.png?default=mp&rating=pg&size=128)
![](https://secure.gravatar.com/avatar/ccad01194cbef756c658b618aee620e3.png?default=mp&rating=pg&size=128)
Built with:
- Ransack drives the filtering and sorting. We extended Ransack to drive the fields and grouping.
- Pagy drives the pagination. We applied Tailwind styling to the generated HTML.
- Stimulus drives the "details set" (only one <details> element open at a time), automatic form submission of pagination items, building complex sorts/filters, etc.
- Turbo Drive allows all of the "searching" to run without a mess of updating dozens of parts of the page on any change.
- Turbo Streams drive the column calculations and inline editing to allow for atomic updates of individual table cells.
- Phlex replaces Action::View as our frontend library, allowing us to build layouts, pages, and components all in pure Ruby.
- TurboPower drives key parts of the inline editing flow.
- TailwindCSS for styling
Application Screenshots
![](https://railshackathon.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBaQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f32c40600e262b015d9e5859131c7a0043ab31ab/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMMEFXa0M5QUU9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--717a738d23a1e593ae8f6c4c6fd471afd2a62d40/CleanShot%202022-09-18%20at%2023.50.24@2x.png)
![](https://railshackathon.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBaUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--d564ac0f79aff84e8bf18ea2cb708539f557ed1d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMMEFXa0M5QUU9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--717a738d23a1e593ae8f6c4c6fd471afd2a62d40/CleanShot%202022-09-18%20at%2023.49.48@2x.png)
![](https://railshackathon.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBaZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1cb9647dc4d06f3715824b16861efa3eaaa0ad94/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMMEFXa0M5QUU9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--717a738d23a1e593ae8f6c4c6fd471afd2a62d40/CleanShot%202022-09-18%20at%2023.49.15@2x.png)
![](https://railshackathon.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBadz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--7ab80a0f66a8e5fce78865e4b7711db9157490cb/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMMEFXa0M5QUU9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--717a738d23a1e593ae8f6c4c6fd471afd2a62d40/CleanShot%202022-09-18%20at%2023.48.26@2x.png)
![](https://railshackathon.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBhQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--bccc36eabedd688e6d07dfec742d122374caa604/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMMEFXa0M5QUU9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--717a738d23a1e593ae8f6c4c6fd471afd2a62d40/CleanShot%202022-09-18%20at%2023.48.09@2x.png)
![](https://railshackathon.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--af4e10bdd30c42f9a24038faa79ade07d3072fab/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMMEFXa0M5QUU9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--717a738d23a1e593ae8f6c4c6fd471afd2a62d40/CleanShot%202022-09-18%20at%2023.47.39@2x.png)
![](https://railshackathon.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBhZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0cc20d19ab47978a58b2cb349c1f278289988b9d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMMEFXa0M5QUU9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--717a738d23a1e593ae8f6c4c6fd471afd2a62d40/CleanShot%202022-09-18%20at%2023.46.46@2x.png)
![](https://railshackathon.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZWs9IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--8cb0b6f2b2bde4c2c57072479a44463189c27496/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMMEFXa0M5QUU9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--717a738d23a1e593ae8f6c4c6fd471afd2a62d40/CleanShot%202022-09-19%20at%2002.03.48@2x.png)
![](https://railshackathon.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZW89IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--5905824c5b32152c19cef6cc55e87d7ded9df4a9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFMMEFXa0M5QUU9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--717a738d23a1e593ae8f6c4c6fd471afd2a62d40/CleanShot%202022-09-19%20at%2002.04.08@2x.png)