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.

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.

React TSX
1

Available Icon Props

  • sortUpIcon: Icon for ascending sort
  • sortDownIcon: Icon for descending sort
  • nextIcon: Icon for pagination next button
  • prevIcon: Icon for pagination previous button
  • expandIcon: Icon for collapsed row groups
  • collapseIcon: Icon for expanded row groups

Implementation Examples

You can find working examples of custom icons in the following components:

  • PaginationDemo: Uses FontAwesome chevron icons (faChevronRight and faChevronLeft) to customize the pagination navigation buttons.
  • RowGroupingDemo: Uses FontAwesome chevron icons (faChevronRight and faChevronDown) to enhance the visualization of expandable row groups.

Using Different Icon Libraries

Simple Table's icon customization is library-agnostic. Here are examples of how to use different icon libraries:

Font Awesome

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { 
faCaretUp, 
faCaretDown, 
faAngleRight, 
faAngleLeft,
faChevronRight,
faChevronDown
} from "@fortawesome/free-solid-svg-icons";

<SimpleTable
// other props...
sortUpIcon={<FontAwesomeIcon icon={faCaretUp} className="text-blue-500" />}
sortDownIcon={<FontAwesomeIcon icon={faCaretDown} className="text-blue-500" />}
nextIcon={<FontAwesomeIcon icon={faAngleRight} className="text-blue-600" />}
prevIcon={<FontAwesomeIcon icon={faAngleLeft} className="text-blue-600" />}
expandIcon={<FontAwesomeIcon icon={faChevronRight} className="text-blue-600" />}
collapseIcon={<FontAwesomeIcon icon={faChevronDown} className="text-blue-600" />}
/>

Material UI Icons

import ArrowUpward from "@mui/icons-material/ArrowUpward";
import ArrowDownward from "@mui/icons-material/ArrowDownward";
import NavigateNext from "@mui/icons-material/NavigateNext";
import NavigateBefore from "@mui/icons-material/NavigateBefore";
import ChevronRight from "@mui/icons-material/ChevronRight";
import ExpandMore from "@mui/icons-material/ExpandMore";

<SimpleTable
// other props...
sortUpIcon={<ArrowUpward className="text-blue-500" />}
sortDownIcon={<ArrowDownward className="text-blue-500" />}
nextIcon={<NavigateNext className="text-blue-600" />}
prevIcon={<NavigateBefore className="text-blue-600" />}
expandIcon={<ChevronRight className="text-blue-600" />}
collapseIcon={<ExpandMore className="text-blue-600" />}
/>

Custom SVG Icons

<SimpleTable
// other props...
sortUpIcon={
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" className="text-blue-500">
  <path d="M8 4l4 4H4z" />
</svg>
}
sortDownIcon={
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" className="text-blue-500">
  <path d="M8 12l4-4H4z" />
</svg>
}
expandIcon={
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" className="text-blue-600">
  <path d="M6 4l5 4-5 4V4z" />
</svg>
}
collapseIcon={
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" className="text-blue-600">
  <path d="M4 6h8l-4 5z" />
</svg>
}
/>

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
  • Pair related icons together (like expandIcon/collapseIcon) with complementary designs
  • For row grouping, choose expandIcon and collapseIcon 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
Previous: ThemesNext: Custom Theme