Charts & Plugins

Charts, maps, the datatable, the rich-text editor and the advanced form inputs are optional add-ons. Each is a thin client component that loads its library on demand via dynamic import(), so nothing heavy ships unless you actually render it. Install the matching peer package and its CSS once.

Install the libraries you use

ApexCharts

ApexChart takes an id, a series and a config (standard ApexOptions). It updates in place when data changes and destroys the chart on unmount:

'use client'
import { ApexChart } from '@adminlte/react'

export function RevenueChart() {
  return (
    <ApexChart
      id="revenue-chart"
      series={[{ name: 'Revenue', data: [31, 40, 28, 51, 42, 109, 100] }]}
      config={{
        chart: { type: 'area', height: 300 },
        xaxis: { categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul'] },
      }}
    />
  )
}

For inline trend lines, SparklineChart needs only an id and a data: number[]:

<SparklineChart id="sales-spark" data={[25, 66, 41, 89, 63, 25, 44]} />

WorldMap (jsVectorMap)

import { WorldMap } from '@adminlte/react'

<WorldMap id="visitors-map" height={300} />

The component dynamically imports jsvectormap and its world map data, renders into a sized container, and tears down on unmount.

Datatable (Tabulator)

import { Datatable } from '@adminlte/react'

<Datatable
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Email', field: 'email' },
    { title: 'Age', field: 'age', sorter: 'number' },
  ]}
  data={[{ name: 'Ann', email: 'ann@x.io', age: 31 }]}
/>

Pass apiUrl instead of data for progressive ajax loading, or tabulatorOptions for any other Tabulator option.

Form plugins

import { InputFlatpickr, InputTomSelect } from '@adminlte/react'

<InputFlatpickr name="due" label="Due date" dateType="date" />

<InputTomSelect
  name="tags"
  label="Tags"
  multiple
  options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]}
/>

InputFlatpickr supports dateType of text | date | time | datetime plus a raw options object; InputTomSelect accepts options, native multiple, and a tomSelectOptions escape hatch.