Components are fundamental building blocks of front end user interface that you can use to assemble and customize application. RemixFast gives you a library of components that are easy to customize and connect to data without any code.
Table
Shows data in tabular format with columns and rows. You can decide which columns to show and customize column display order. Default layout provides one to one column to field mapping, but you can change that to suite your row layout. You can combine multiple fields in a column using a Stack or Block layout component.
Card List
Shows data using responsive Card formant and is great for showing data on various form factors, from mobile to desktop! You can customize Card layout. Default card is made up of stack component, having one or more children fields laid out in a column. You can change orientation to horizontal and/or create unique layout to suit your design requirements.
Kanban Board
Boards visually depict data at various stages of a process using cards to represent work items and columns to represent each stage of the process. Board are made up of Board column and allow user to change data state by dragging board card from one column to another.
Shows data in columns grouped by property. Allows you to show tasks that are moving through stages of a process or workflow, or are grouped by property like status. Use them for project management, process flow and visualizing your data state. You can configure Board Group/Column to show, as well as customize Board Card layout, which is used to visually depict task or work item in a board column.
Board Group
Board Group/Column is used to group related item in Kanban board. They support drag and drop to change item status as well as showing item details.
List Components
Table, Card List and Kanban board are all List components and you can replace one with another. For instance, if you started with Table, but want to change over to Card List, just delete existing Table component and then drop new Card List component there!
Editable Table
Shows data in tabular format and lets you edit data inline. You can also decide whether user can delete data.
Panel
Panel is used to group items that logically belong together on a Form view or Dialog view. You can use section, stack and blocks to layout components in a panel.
Section
Section allows you to layout components in a row and have it automatically warp on smaller form factor. Section is primarily used to layout components in a Panel.
Stack
Stack is for laying out component using FlexBox layout pattern. Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
Block
Block is a generic container for layout. It is used to layout a block of components and can be positioned absolutely compared to parent container.
Tabs
Tab bar allows you to organize data in using tab and only show relevant data when a tab is selected. You can covert any form to tab layout just by dropping a tab component and connecting it with existing panels.
Stats List
Stats show list of stat. Just select a view or table and column to show stats. Stat can have either a fixed label or dynamic label based on associated field. This is useful if you are aggregating data by a field and need to show aggregated number as stat. Stat can also be linked to a page to see details.
Chart
Chart are used to visualize data. Chart can show data from any table or view, just select field for x and y axis. Chart can also be linked to a page to drill down and see details.
You can use following chart types to visualize data
- Line
- Bar
- Pie
- Scatter
- Doughnut
- PolarArea
- Radar
- Bubble
Button
Button are used to trigger actions (in response to user event). Button can be configured to trigger different actions on data like Delete, Update and Create, call various workflow actions and make API calls.
Buttons also allows for triggering UI screens like Dialog as well as functionality like Bulk Create. All of the actions are pre-built and require no-code. You just select and configure.
Icon-Thumbnail
Icon are similar to photo, but normally reserved for display only, mainly for small size photos/thumbnails. Icons can also show any icons from included material design icon librar
Custom Field
Custom field allow you to provide a path to data for display. Normally field are automatically connected to data, but sometimes data can be nested. Custom field are useful for those cases and allow you to provide custom path for data lookup.
Expression Field
Expression field allow you to display data using combination other fields. You can compose a field expression by combining field name with other text characters. Field Names will be replaced with respective data at run time.
Display Text
Text is used to display text/sentence/words to user. Text component support extensive formatting and is very useful when building reports.
Navlink
Navlink is wraps Remix NavLink component and includes functionality to check user rights and display or hide link based on configured rights. It primarily is used by NavBar
Props
- to => Same as NavLink to
- iconComponent => Optional React Component to display Icon
- iconName => Optional, Material Icon/Symbol Name (string) to display Icon
- text => Name to display
- rights => List of rights, user must have right for link to be visible
- anyRight => whether user needs to have all rights or any one of the rights
- shouldBeAdmin => If true, link only visible to Admin
- navitemClassName => Override Nav Item styles
- activeClassName => Override Active Nav Link styles
Urllink
Urllink is can be used to display an absolute URL in Navbar and it renders stylized anachor <a/>
Props
- to => Anchor href
- iconComponent => Optional React Component to display Icon
- text => Name to display
Navbar
Navbar component is used for navigation menu. It uses Navlink component to display list of items and can be collapsed. Navbar component is also used for responsive navigation via hamburger menu. When user click hamburger menu, Navbar is display and it auto hides on any menu click.
Behind the scenes, display-hide of Navbar is orchestrated using a NavbarContextProvider component and related useNavBar and useNavBarActions hook.
useNavBar
useNavBar hook provides a property called display which informs if navbar should be displayed (true) or hidden (false)
useNavBarActions
useNavBarActions hook provides two methods
- show = to show navbar
- hide = to hide navbar