Documentation

Custom Icons

Simple Table allows you to override the default icons used for sorting, pagination, row expansion, filtering, and drag-and-drop operations. Use the unified icons prop to customize all icons in one place, maintaining consistent branding across your application.

New in v2.4.1

All icon props have been consolidated into a single icons object for better organization. The new drag icon is used for the drag handle in the column editor.

CodeSandbox

Basic Implementation

To customize the icons in Simple Table, pass your custom icon components to the respective props. You can use any icon library like Font Awesome, Material Icons, or your own custom SVG icons.

Available Icon Props

PropertyRequiredDescriptionExample
icons
IconsConfig
Optional
Unified object for configuring all table icons. Provides a cleaner, more organized API for icon customization.
icons.sortUp
React.ReactNode
Optional
Custom icon component for ascending sort indicator in column headers.
icons.sortDown
React.ReactNode
Optional
Custom icon component for descending sort indicator in column headers.
icons.filter
React.ReactNode
Optional
Custom icon component for the column filter button in filterable columns.
icons.expand
React.ReactNode
Optional
Custom icon component for collapsed row groups in hierarchical data display.
icons.headerExpand
React.ReactNode
Optional
Custom icon component for the expand state of collapsible column headers.
icons.headerCollapse
React.ReactNode
Optional
Custom icon component for the collapse state of collapsible column headers.
icons.prev
React.ReactNode
Optional
Custom icon component for pagination previous button.
icons.next
React.ReactNode
Optional
Custom icon component for pagination next button.
icons.drag
React.ReactNode
Optional
Custom icon component for the drag handle in the column editor. Used for drag-and-drop column reordering.

Best Practices

  • Keep icon sizes consistent for a polished look
  • Use colors that match your application's theme
  • Ensure icons are clear and intuitive for their purpose
  • For row grouping, choose expand icons that clearly indicate the expand/collapse state
  • For drag handles, use icons like grip-vertical or drag indicators that suggest draggability
  • Consider using the same icon family throughout your application
  • Test your icons for visibility against different background colors
  • Use the unified icons prop to keep all icon configurations in one place