Skip to documentation content
|

Product components

Install Honest UI components with the controls and states needed for one application task.

Product components package related controls and state handling in one copied component. Data Table adds common record controls to a native HTML table. Data Grid adds column customization, typed filters, editing, server-managed state, and row virtualization for larger datasets. Date Range Picker wraps quick ranges, month grids, confirm flow, and range state in one trigger. File Upload covers file picking, validation, previews, and upload state while your application owns the request itself.

The CLI copies each product component into your project, so you can change its source directly.

Page structure

Product component pages include:

  • What the component does and when a smaller UI component is enough.
  • How its parts and states work.
  • Which accessibility behavior the component supplies and what your application must supply.
  • How to install it with the CLI or by copying its source files.
  • A small usage example followed by examples for important states.

Available components
ComponentUse it for
Data TableSearching, filtering, sorting, selecting, and paginating application data
Data GridWorking with large datasets, advanced filters, bulk actions, and customizable columns
Date Range PickerChoosing start and end dates for filters, bookings, and reporting windows
Filter BarAdding, viewing, editing, and clearing filters of many types above any collection
File UploadPicking, validating, and reviewing files while your application uploads them
Change ReviewShowing what changed between two versions of an object, and collecting a decision on each change
Paste TablePasting spreadsheet cells, mapping columns to fields, and fixing invalid cells before an import
Async ActionRunning a request from a button with the result shown at once, and with retry, cancel, and undo kept available afterwards
Overflow ToolbarKeeping a toolbar usable in a container that changes width, by moving lower-priority actions into a More menu
Quantity FieldEntering a duration or a data size in whichever unit is convenient, while your application stores one number in one unit

Choosing a table or grid

Use Table to present rows and columns without search, filters, selection, or pagination. Use Data Table when people need those common controls to find records and act on them. Use Data Grid when people also need to resize, reorder, pin, hide, edit, or virtualize columns and rows.

A read-only pricing comparison may only need Table. An invoice queue that spans hundreds of records often fits Data Table. An operations workspace with many columns, bulk changes, server sorting, and tens of thousands of records fits Data Grid.

Copying examples

Examples include the behavior needed for the task. When you copy one:

  1. Replace the sample columns and rows with your application's data.
  2. Rewrite accessible names, row labels, and state messages for the records in your table.
  3. Keep every loading, empty, no-results, or error state that users can reach.
  4. Decide whether the browser or server handles sorting, filtering, and pagination.
  5. Test the result with a keyboard and the assistive technologies your product supports.

Customizing product components

Product components use the same theme tokens as other Honest UI components. You can rearrange their exported parts, change the styles, add cells and actions for your application, or wrap the component in your own API.

Keep the states and labels attached to each control. Search needs a no-results state. Selection checkboxes need names that identify their rows. Server pagination needs the total row count to report the right page range.