Yet another project based on the great AdminLTE Control Panel Template. This is not because of a not invented here syndrom but because the other projects seem not very active or did not meet the expectations I had in using such a react component. The philosophy for this project was to make it as easy as possible to use from a developer standpoint and rework it where I've seen the use to. Currently it does still depend on jQuery here and there (especially the DataTables Component).
Several components have a property type or color that allows the usage of the following values to give different accents to the component
Types and Colors
Type
Color
ColorCode
default
gray
#d2d6de
primary
light-blue
#3c8dbc
info
aqua
#00c0ef
success
green
#00a65a
warning
yellow
#f39c12
danger
red
#f56954
error
red
#dd4b39
Additional Colors
In addition there are several colors available without a corresponding type
Color
navy
teal
purple
orange
maroon
black
Icons
AdminLTE makes use of font-awesome icons and ionicons. Since we wanted to stay up to date, we migrated font awesome to version 5.x. Therefore the syntax for icons is no longer fa-icon but instead far/fas/fab-icon. All available icons can be found on the respective websites (font-awesome, ionicons)
AdminLTE
Props
Name
Type
Default
Description
children
node
NavbarMenu, Sidebar and Content Components belong here
title
oneOf: string, [string]
['Admin', 'LTE']
Title in header bar, if an array is supplied the first element will be rendered bold and the second normal
titleShort
oneOf: string, [string]
['Admin', 'LTE']
Title in header bar when the sidebar is collapsed, if an array is supplied the first element will be rendered bold and the second normal
An entry is the component rendered inside the navbar it can be either used as an additional button (e.g. for logout actions) or as an menu opener rendering components of type MessageItem, NotificationItem, TaskItem. Additionally an colored label can be attached indicating that several actions are behind the menu. If it should act as an button provide the onClick prop otherwise provide some children to use it as an menu.
Label value displayed on top right of entry. If you provide no value, the value is calculated as the number of nested children, to disable the label in this case provide a value of 0
headerText
string
Text above menu items in opened state
footerText
string
Text bellow menu items in opened state
onFooterClick
function
Action triggered on footer click
className
string
Additional classes
children
oneOf: NotificationItem, TaskItem, MessageItem
Additional classes
onClick
function
On click action
NotificationItem
A simple notification style navbar list item with icon
As mentioned in react-bootstrap, React does not render new elements on new lines thus buttons side by side will be rendered without margin, to counteract that you can wrap your <Button/>'s with <ButtonGroup />
Callback after row gets selected - arguments (rowdata)
onDeselect
function
Callback after row deselect - arguments (rowdata)
footer
boolean
false
Renders column headers on bottom of table
hover
boolean
false
Highlight hovered rows
border
boolean
false
Show borders around cells
condensed
boolean
false
Compact data layout
striped
boolean
false
Alternate row coloring
noMargin
boolean
false
Removes table margin
responsive
boolean
false
Resize table of window resize
selectedRows
[object]
Allows passing in the currently selected rows
onClickEvents
object
Row level bound click events based on class on cell dom element. Example render: (data) => ``<div class="on-click-event">${data}</div>``' will bind to an object {onClickEvent: (data, rowIndex, rowData) => {console.log("do stuff with row data")}}
page
number
Active page, can be left empty if uncontrolled
totalElements
func
Passing this property or hasMore makes this component controlled, therefore pageSize, pageChange and orderChange props should be provided too
pageSize
number
Allows passing in the currently selected rows
onPageChange
func
Page change event handler
onOrderChange
func
Order change event handler
hasMore
bool
If you control data externally and are not exactly aware if additional pages exist you can provide hasMore instead to indicate if more data exists
order
[object]
Allows passing in the currently selected rows
searchValue
string
Search value for datatable search field
onSearchChange
function
Search value change event
SmartTable
This will soon be replace Datatables as it Datatables is a jQuery widget and therefore breaks the entire React dom handling. SmartTable has a lot of auto configuration in it. It has a build in sort, filter and column selection functionality.
Props
Name
Type
Default
Description
data
arrayOf
null
columns
array
Column descriptions, see column options for reference, if this prop is not provided smart table will infer them from the first entry in data as soon as data is supplied
condensed
boolean
false
responsive
boolean
false
page
number
undefined
striped
boolean
false
onPageChange
function
undefined
onSearch
function
undefined
border
boolean
false
filterExternal
boolean
false
pageSize
number
20
hover
boolean
false
noMargin
boolean
false
onOrderChange
function
undefined
onRowSelect
function
undefined
onSearchChange
function
undefined
defaultFilterColumn
string
'$all'
totalElements
number
undefined
hasMore
boolean
undefined
Order props
Name
Type
Default
Description
title
string
Column title
data
string
Data property containing the data to be rendered in the column
width
string
Use this prop to give the column a fixed width
render
function
Custom render function for the column with arguments (data, rowData, rowIndex)
toggleHidden
bool
(SmartTable only) Disables option to show/hide column
toggleOrder
bool
Description
Simple wrapper over <dl>
Props
Name
Type
Default
Description
id
string
horizontal
bool
false
Will render the list horizontal
children
oneOfType: node, [node]
``
DescriptionItem
Props
Name
Type
Default
Description
text
string
label
string
noText
bool
false
Use this if you only want to render a label
DescriptionBlock
A block content element containing several text elements (text and header) a percentage description and indicator.
Can be used instead of onFooterClick to route instead to another page directly
Label
Props
Name
Type
Default
Description
pullRight
boolean
false
children
oneOfType
null
type
oneOf
null
name
string
uuidv4()
labelSm
number
2
xs
number
null
label
oneOfType
null
labelLg
number
null
sm
number
10
labelMd
number
null
labelIcon
string
null
id
string
undefined
lg
number
null
md
number
null
labelXs
number
null
labelClass
string
null
labelPosition
oneOf
'left'
LoadingSpinner
Props
Name
Type
Default
Description
icon
string
'fas-sync-alt'
size
string
'3x'
LoginCore
Props
Name
Type
Default
Description
children
oneOfType
null
Margin
Props
Name
Type
Default
Description
pullRight
boolean
false
children
oneOfType
``
Props
Name
Type
Default
Description
Memberbox
Props
Name
Type
Default
Description
viewAllLink
string
'/'
id
string
undefined
type
oneOf
``
collapsable
boolean
false
async
boolean
false
closable
boolean
false
title
string
null
NavList
Props
Name
Type
Default
Description
pills
boolean
false
stacked
boolean
false
children
oneOfType
``
NavListItem
Props
Name
Type
Default
Description
text
string
null
color
oneOf
'red'
to
string
null
icon
string
'far-circle'
onClick
function
null
iconLabel
string
null
Pagination
Props
Name
Type
Default
Description
hasMore
boolean
null
activePage
number
null
pageSize
number
null
onChange
function
``
totalElements
number
null
labels
shape
{
ProductList
Props
Name
Type
Default
Description
children
oneOfType
``
inBox
boolean
false
ProductListItem
Props
Name
Type
Default
Description
image
string
null
description
string
null
labelType
oneOf
'info'
label
string
false
title
string
null
to
string
'/'
ProgressBar
Props
Name
Type
Default
Description
xs
boolean
false
type
oneOf
'primary'
color
oneOf
null
active
boolean
false
xxs
boolean
false
text
string
null
value
number
``
sm
boolean
false
vertical
boolean
false
striped
boolean
false
max
number
100
min
number
0
ProgressGroup
Props
Name
Type
Default
Description
color
oneOf
``
currentValue
number
``
maxValue
number
``
text
string
null
Sparkbar
Props
Name
Type
Default
Description
color
string
``
data
arrayOf
``
height
oneOfType
``
padding
boolean
false
SparklineBox
Tabs
Wrapper around react-bootstrap tabs, this can be either used as uncontrolled tabs by providing a defaultActiveKey property or a controlled tabs using activeKey and onSelect props
Props
Name
Type
Default
Description
id
string
activeKey
string
Currently active tab, if you provide an activeKey you should also provide an onSelect event handler prop
defaultActiveKey
string
Initially active tab, similar to react behaviour of defaultValue on <input> components this prop provides an inital state for uncontrolled tabs
onChange
function
Event handler fired when a tab is changed
children
TabContent
Provide multiple TabContent as child to render anything in tabs
pullRight
bool
false
Pulls the tab header to the right side
contentHeight
string
If the content height varies you can provide a fixed height to prevent moving elements when changing between tabs
mountOnEnter
false
Adds the tab content to react's virtual dom at the first them it is selected
Pulls the title to the left side when using the pullRight property
onSelect
function
null
Callback on changing tab
TabContent
Use TabContent in conjuction with Tabs to actually provide the tabular content
Props
Name
Type
Default
Description
eventKey
string
Unique key used by Tabs to identify the currently active tab
children
node
Tabular content
Forms
A various of different form elements, ranging from simple default html forms (Text, Radio, Select, Checkbox) to advanced components based on jQuery Widgets like Select2, ICheck used by the original adminlte template and pure react based inputs like Date, DateRange (based on react-dates), Slider (based on rc-slider) and other components. All form components should behave like original react inputs with defaultValue's and onChange passing more or less pure Javascript event objects to make it possible to work with libraries like Formik.
Note that all form elements are not directly exported by AdminLTE instead you should import Inputs and destructure the required elements.
import AdminLTE, { Inputs } from 'adminlte-2-react';
const { Select2, Date, DateTime, Text } = Inputs;
...
All form elements are wrap in the Component InputWrapper with various styling options such as icons, radio buttons, therefore all following props are shared between all form elements. If you want to add an additional element you can also wrap it with InputWrapper to fit it smooth into the styling of all other elements. Additional all inputs share the same labeling props to keep a similar styling.
The following InputWrapper and Label props are shared within all of adminlte-2-react input components
Bootstrap label column width, does only work when labelPosition left is used
labelSm
number (0-12)
Bootstrap label column width, does only work when labelPosition left is used
labelMd
number (0-12)
Bootstrap label column width, does only work when labelPosition left is used
labelLg
number (0-12)
Bootstrap label column width, does only work when labelPosition left is used
xs
number (0-12)
Bootstrap input element column width, does only work when labelPosition left is used
sm
number (0-12)
Bootstrap input element column width, does only work when labelPosition left is used
md
number (0-12)
Bootstrap input element column width, does only work when labelPosition left is used
lg
number (0-12)
Bootstrap input element column width, does only work when labelPosition left is used
Text
Slider
A slider component that can be used either as a single slider or a (multi) range slider, it is based on rc-slider. As with most other components, the most import props/usedful props are directly exposed. All other props can be passed to the wrapped component using the rcSliderProps property.
Pass any other rc-slider prop directly to rc-slider, see documentation
vertical
boolean
false
Display slider vertical
Checkbox
Simple unstyled checkbox
Props
Name
Type
Default
Description
text
string
text next to checkbox
onChange
func
disabled
bool
false
name
string
value
oneOf: string, number
Value returned when box is checked
checked
boolean
null
Radio
Props
Name
Type
Default
Description
onChange
function
null
name
string
uuidv4()
options
arrayOf
``
Select
Props
Name
Type
Default
Description
onChange
function
null
options
``
null
label
string
null
disabled
boolean
false
value
oneOfType
undefined
name
string
uuidv4()
multiple
boolean
false
Select2
This component is based on the popular jQuery select2 plugin. It has some improvements and events and select options are adjusted to provide a uniformal coding experience instead of dealing with ever changing api's. Additionally it is possible to provide an externally controlled datasource using onDataFetch callback.
Props
Name
Type
Default
Description
id
string
Component id
select2Options
object
Provide additional select2 options for the jQuery widget, see the select2 homepage for the entire documention of those features
On data fetch handler, arguments are an object with page no and searchValue current search term, a success callback that should be called with new data and a failure handler on fail
fetchDataDelay
number
100
Delay before onFetchData is being call when entering a search value, to prevent overfetching of data
Date
This component in combination with DateRange is heavily based on react-dates with additional simplification and styling based on admin-lte. It should replace bootstrap-datepicker component in the original theme with a pure react alternative. The most common props are directly exposed on the Date component, additional props can be passed by using the dateProps property. The full documentation of available props can be found in react-dates SingleDatePicker documentation
You can either pass in a string in combination with the format property or an already converted moment.js object, as the original this component used moment as its internal representation. Note that the onChange event will always return a string