Tools

Heavier interactive components. All three are client components; Datatable and Editor lazy-load their libraries.

A Bootstrap modal dialog. It renders the modal markup with the id you give it; open it the Bootstrap way — a trigger with data-bs-toggle="modal" and data-bs-target="#your-id"— which requires Bootstrap's JS bundle (see Installation). The optional onShow / onHidecallbacks fire on Bootstrap's modal events.

tsx

import { Modal, Button } from 'adminlte-react'

export function Example() {
  return (
    <>
      <button className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirm">
        Open modal
      </button>

      <Modal
        id="confirm"
        title="Delete item?"
        centered
        footer={
          <>
            <button className="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <Button theme="danger" label="Delete" />
          </>
        }
      >
        This action cannot be undone.
      </Modal>
    </>
  )
}

Prop	Type	Default	Description
`id`required	`string`	—	DOM id used by the trigger (data-bs-target="#id").
`children`required	`React.ReactNode`	—	Modal body content.
`title`	`string`	—	Header title.
`size`	`'sm' \| 'lg' \| 'xl'`	—	Dialog width.
`theme`	`BootstrapTheme`	—	Header color treatment.
`centered`	`boolean`	—	Vertically center the dialog.
`scrollable`	`boolean`	—	Scroll the body instead of the page.
`staticBackdrop`	`boolean`	—	Don't close on backdrop click.
`footer`	`React.ReactNode`	—	Footer content (buttons).
`onShow`	`() => void`	—	Fires on the shown event.
`onHide`	`() => void`	—	Fires on the hidden event.

Datatable client

A data grid powered by Tabulator (lazy-loaded). Supply columns plus either local data or a remote apiUrl (progressive scroll loading). Install tabulator-tables and load its Bootstrap 5 theme CSS — see Plugins.

tsx

<Datatable
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Email', field: 'email' },
    { title: 'Age', field: 'age', sorter: 'number', width: 100 },
  ]}
  data={[
    { name: 'Ada Lovelace', email: '[email protected]', age: 36 },
    { name: 'Alan Turing', email: '[email protected]', age: 41 },
  ]}
/>

{/* or load from an API */}
<Datatable columns={columns} apiUrl="/api/users" />

Prop	Type	Default	Description
`columns`required	`DatatableColumn[]`	—	{ title, field, sorter?, formatter?, width? }.
`data`	`Record<string, unknown>[]`	—	Local row data.
`apiUrl`	`string`	—	Remote data source (progressive scroll load).
`tabulatorOptions`	`Record<string, unknown>`	—	Raw Tabulator options (merged in).
`id`	`string`	`auto`	Container id (auto-generated if omitted).
`className`	`string`	—	Container class.

Editor client

A rich-text editor powered by Quill (lazy-loaded). onChange receives the current HTML string. Install quill and load its snow theme CSS — see Plugins.

tsx

<Editor
  name="body"
  label="Article body"
  value={html}
  placeholder="Write your article…"
  onChange={(html) => setHtml(html)}
/>

Prop	Type	Default	Description
`name`required	`string`	—	Field name (also used for a hidden input).
`label`	`string`	—	Label above the editor.
`value`	`string`	`''`	Initial HTML content.
`placeholder`	`string`	`'Enter text...'`	Empty-state text.
`onChange`	`(html: string) => void`	—	Fires with the current HTML.
`quillOptions`	`Record<string, unknown>`	—	Raw Quill options (merged in).
`fgroupClass`	`string`	—	Class on the form group.

Modal client

tsx

import { Modal, Button } from 'adminlte-react'

export function Example() {
  return (
    <>
      <button className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirm">
        Open modal
      </button>

      <Modal
        id="confirm"
        title="Delete item?"
        centered
        footer={
          <>
            <button className="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <Button theme="danger" label="Delete" />
          </>
        }
      >
        This action cannot be undone.
      </Modal>
    </>
  )
}

Prop	Type	Default	Description
`id`required	`string`	—	DOM id used by the trigger (data-bs-target="#id").
`children`required	`React.ReactNode`	—	Modal body content.
`title`	`string`	—	Header title.
`size`	`'sm' \| 'lg' \| 'xl'`	—	Dialog width.
`theme`	`BootstrapTheme`	—	Header color treatment.
`centered`	`boolean`	—	Vertically center the dialog.
`scrollable`	`boolean`	—	Scroll the body instead of the page.
`staticBackdrop`	`boolean`	—	Don't close on backdrop click.
`footer`	`React.ReactNode`	—	Footer content (buttons).
`onShow`	`() => void`	—	Fires on the shown event.
`onHide`	`() => void`	—	Fires on the hidden event.

Datatable client

tsx

<Datatable
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Email', field: 'email' },
    { title: 'Age', field: 'age', sorter: 'number', width: 100 },
  ]}
  data={[
    { name: 'Ada Lovelace', email: '[email protected]', age: 36 },
    { name: 'Alan Turing', email: '[email protected]', age: 41 },
  ]}
/>

{/* or load from an API */}
<Datatable columns={columns} apiUrl="/api/users" />

Prop	Type	Default	Description
`columns`required	`DatatableColumn[]`	—	{ title, field, sorter?, formatter?, width? }.
`data`	`Record<string, unknown>[]`	—	Local row data.
`apiUrl`	`string`	—	Remote data source (progressive scroll load).
`tabulatorOptions`	`Record<string, unknown>`	—	Raw Tabulator options (merged in).
`id`	`string`	`auto`	Container id (auto-generated if omitted).
`className`	`string`	—	Container class.

Editor client

A rich-text editor powered by Quill (lazy-loaded). onChange receives the current HTML string. Install quill and load its snow theme CSS — see Plugins.

tsx

<Editor
  name="body"
  label="Article body"
  value={html}
  placeholder="Write your article…"
  onChange={(html) => setHtml(html)}
/>

Prop	Type	Default	Description
`name`required	`string`	—	Field name (also used for a hidden input).
`label`	`string`	—	Label above the editor.
`value`	`string`	`''`	Initial HTML content.
`placeholder`	`string`	`'Enter text...'`	Empty-state text.
`onChange`	`(html: string) => void`	—	Fires with the current HTML.
`quillOptions`	`Record<string, unknown>`	—	Raw Quill options (merged in).
`fgroupClass`	`string`	—	Class on the form group.

Brad Diesel

John Pierce

Nora Silvester

Modal client

Datatable client

Editor client

Brad Diesel

John Pierce

Nora Silvester

Tools

Modal client

Datatable client

Editor client