Money Geek UI Components
BadgeBest RankingBoxBreakLineButtonColumn Range ChartColumnsCompany Cross LinkingCompany LogoContent ValidatorExpand/CollapseIconList RankingAttributesBasic UsageOrderedListPlaygroundPremiumRankingPros/ConsQuoteQuote ButtonQuotesWidgetReadmeStar RankingState Cross LinkingStaticPremiumTableStaticTable

List Ranking

Attributes

city
string
service
"carInsurance"
'carInsurance'
year
string
displayCount
number
5
data
object │ Array<object>
margin
object

Basic Usage

Structure defined for data parameter:

[
  {
    company: 'State Farm',
    address: '123 Main St',
    score: '3.6',
    ratings: 17
  },
  {
    company: 'Geico',
    address: '123 Main St',
    score: '5',
    ratings: 24
  },
  {
    company: 'Todd\'s Terrific Insurance',
    address: '123 Main St',
    score: '3.3',
    ratings: 12
  },
  {
    company: 'Dan\'s Incredible Insurance',
    address: '123 Main St',
    score: '3.6',
    ratings: 35
  },
  {
    company: 'Nationwide',
    address: '123 Main St',
    score: '4.3',
    ratings: 21
  },
  {
    company: 'Allstate',
    address: '123 Main St',
    score: '5',
    ratings: 30
  },
]

See below example to use the data parameter on the component.