Skip to main content

Design Principles

LineUp-lite is build based on the following design principles:

  • Customizability - LineUp-lite provides multiple levels in which the library can be used. From the ready-to-use LineUpLite React component down to individual visualization components such as BoxPlot or Histogram.

  • Only import what you need - The library and its components are ESM tree-shakeable whenever possible. If you don't have a numeric column in your table, there is no need to have the code for one in your bundle.

  • Layered architecture - To further emphasize the previous points, the library is split up in three packages, each implementing a different abstraction level:

    • @lineup-lite/components contains basic React components and statistical logic methods which can be used independently of the LineUp ranking scenario.
    • @lineup-lite/hooks provides a series of extensions to the react-table for creating a LineUp based table, such as a react-table plugin for computing column statistics, Cell renderer using the @lineup-lite/components, ...
    • @lineup-lite/table provides the highest abstraction level and provides React components such as LineUpLite for generating LineUp ranking tables with minimal effort.

  • Good defaults - LineUp-lite fosters good visualization practices, such as proper use of color, through good defaults that work in most cases without any customizations.

About the author: Samuel Gratzl is main developer behind LineUp-lite. He also developed several other libraries LineUp.js, UpSet.js, and numerous chart.js plugins. In addition, he is the active maintainer of slack-cleaner. Find more about him at his website or visit his GitHub profile.