Documentation

Custom Icons

Simple Table allows you to override the default icons used for sorting, pagination, and other UI elements. This customization helps you maintain consistent branding and design language across your application.

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

Property	Required	Description

`sortUpIcon` React.ReactNode	Optional	Custom icon component for ascending sort indicator in column headers.
`sortDownIcon` React.ReactNode	Optional	Custom icon component for descending sort indicator in column headers.
`nextIcon` React.ReactNode	Optional	Custom icon component for pagination next button.
`prevIcon` React.ReactNode	Optional	Custom icon component for pagination previous button.
`filterIcon` React.ReactNode	Optional	Custom icon component for the column filter button in filterable columns.
`expandIcon` React.ReactNode	Optional	Custom icon component for collapsed row groups in hierarchical data display.
`headerExpandIcon` React.ReactNode	Optional	Custom icon component for the expand state of collapsible column headers.
`headerCollapseIcon` React.ReactNode	Optional	Custom icon component for the collapse state of collapsible column headers.

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 expandIcon that clearly indicate the expand/collapse state
Consider using the same icon family throughout your application
Test your icons for visibility against different background colors