React Daisy Components – UI library powered by Boulteu

Getting Started

Introduction

React Daisy Components is a comprehensive collection of React components styled with Tailwind CSS and DaisyUI. Built with TypeScript, these components are designed for performance, accessibility, and developer experience.

🚀

Performance

Optimized for speed with lazy loading and efficient rendering

🎨

Design

Styled with DaisyUI, and adapt to your theme for seamless integration

⚡

TypeScript

Full TypeScript support with comprehensive type definitions

Setup

Installation and configuration guide

Prerequisites

Make sure you have the following dependencies installed:

npm install react@^19.1.1 tailwindcss@^4.1.12 daisyui@^5.0.50

Installation

npm install react-daisy-components

Configuration

Configuration based on your Tailwind CSS version:

Tailwind V4

/* Add to your main CSS file */
@import "tailwindcss";
@plugin "daisyui";

@source "./node_modules/react-daisy-components";

Tailwind V3

// Add to your Tailwind configuration file (tailwind.config.js)
export default {
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/react-daisy-components/**/*.{vue,js,ts}"
  ],
  plugins: [require("daisyui")]
}

Internationalization (i18n)

All components automatically adapt to the page language (based on the HTML lang attribute) if translations are available (if not, the default language is English). Available translations: English 🇬🇧, French 🇫🇷, Spanish 🇪🇸

Components

DataTable

Advanced data table with pagination, sorting, filtering, export and more.

Import

import { DataTable } from 'react-daisy-components'

Basic

A simple data table with basic functionality. All props above are required.

Prop	Type	Description
`data`	Object[] \| String	Array of data objects (represents the table rows), see Advanced for more info about the String type usage
`columns`	Object[]	Array of column definitions (represents the table columns)
└─ `key`	String	Unique identifier for the column (will be capitalized and used as the column header if no label, e.g. 'email' becomes 'Email')

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id' },
    { key: 'name' },
    { key: 'email' }
  ];
  
  return (
    <DataTable
      data={data}
      columns={columns}
    />
  );
};

export default MyTable;

Pagination

Data table with pagination controls.

Prop	Type	Default value	Description
`paginationConfig`	Object		Pagination configuration
└─ `maxVisiblePages`	Number	5	Number of page buttons to display
└─ `showFirstLast`	Boolean	true	Show first/last page navigation buttons
└─ `showPageInfo`	Boolean	true	Display current page information
└─ `perPageOptions`	Number[]	[5, 10, 25, 50]	Array of items per page options
└─ `perPage`	Number	10	Default number of items per page

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id' },
    { key: 'name' },
    { key: 'email' }
  ];

  const paginationConfig = {
    maxVisiblePages: 2,
    showFirstLast: false,
    showPageInfo: false,
    perPageOptions: [4, 8, 12, 16, 20],
    perPage: 4
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

Style

Customize the appearance of your data table.

Prop	Type	Default value	Description
`tableClass`	String	table-zebra	Defines the table classes, can be tailwind/daisyui classes but custom classes are also supported

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      tableClass="table-xs border-1 border-gray-300"
    />
  );
};

export default MyTable;

Label

Customize column headers with descriptive labels.

Prop	Type	Default value	Description
`columns`	Object[]		See Basic for more info
└─ `label`	String		Defines the column header label (default value: capitalized column key)

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: '1. ID' },
    { key: 'name', label: '2. Name' },
    { key: 'email', label: '3. Email' },
    { key: 'created_at', label: '4. Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

Sort

Enable column sorting to help users find and organize data.

Prop	Type	Default value	Description
`columns`	Object[]		See Basic for more info
└─ `sortable`	Boolean	true	Defines if the column is sortable

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID', sortable: 'true' },
    { key: 'name', sortable: 'true' },
    { key: 'email', sortable: 'false' },
    { key: 'role', sortable: 'true' },
    { key: 'created_at', label: 'Created at', sortable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

Filter

Add filtering capabilities to narrow down data.

Click the filter button to the left of the search bar to use the filters.

Prop	Type	Default value	Description
`columns`	Object[]		See Basic for more info
└─ `filterable`	Boolean	true	Defines if the column is filterable, if all columns are not filterable, the filter button will disappear

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID', filterable: 'false' },
    { key: 'name', filterable: 'true' },
    { key: 'email', filterable: 'false' },
    { key: 'role', filterable: 'true' },
    { key: 'created_at', label: 'Created at', filterable: 'true' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

Search

Search functionality across all columns using the search bar.

Prop	Type	Default value	Description
`columns`	Object[]		See Basic for more info
└─ `searchable`	Boolean	true	Defines if the column is searchable, if all columns are not searchable, the search bar will disappear

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID', sortable: 'false', filterable: 'false', searchable: 'false' },
    { key: 'name', sortable: 'false', filterable: 'false', searchable: 'true' },
    { key: 'email', sortable: 'false', filterable: 'false', searchable: 'true' },
    { key: 'role', sortable: 'false', filterable: 'false', searchable: 'true' },
    { key: 'created_at', label: 'Created at', sortable: 'false', filterable: 'false', searchable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
    />
  );
};

export default MyTable;

Export

Export the data to a CSV, JSON, or Excel file.

Prop	Type	Default value	Description
`exportFilename`	String \| Boolean	table-export	Defines the filename of the exported file. If false, the export button will disappear.

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID', searchable: 'false' },
    { key: 'name', searchable: 'false' },
    { key: 'email', searchable: 'false' },
    { key: 'role', searchable: 'false' },
    { key: 'created_at', label: 'Created at', searchable: 'false' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      exportFilename="my-table-export"
    />
  );
};

export default MyTable;

Custom Cells

Customize cells based on data values by using the cellRenderer prop.

Prop	Type	Default value	Description
`cellRenderer`	Function		Defines the function to render the cell

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };

  const cellRenderer = (value, row, column) => {
    if (column.key !== "role") return value;

    const getBadgeClass = (val) => {
      if (val === "Admin") return "badge-primary";
      if (val === "User") return "badge-secondary";
      if (val === "Moderator") return "badge-success";
      return "";
    };

    return (
      <span className={`badge badge-sm badge-outline ${getBadgeClass(value)}`}>
        {value}
      </span>
    );
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      exportFilename={false}
      cellRenderer={cellRenderer}
    />
  );
};

export default MyTable;

Custom Actions

Add custom action buttons to the table.

You can use the onAction prop to handle the actions click.

Prop	Type	Default value	Description
`actionsConfig`	Object		Defines the actions buttons to be displayed in the table
└─ `actions`	Object[]		Array of actions
└─ `action`	String		Action identifier (required, will be used to handle the action click)
└─ `variant`	String		Variant of the action (primary, secondary, success, warning, error, info, ghost, link, neutral)
└─ `icon`	String \| Component		Icon of the action (add, edit, delete, refresh, or use your own component)
└─ `tooltip`	String		Tooltip of the action (text to show on hover)
└─ `disabled`	Boolean	false	Defines if the action is disabled
`onAction`	Function		Defines the function to handle the action click

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };

  const actionsConfig = {
    actions: [
      { action: 'add', variant: 'success', icon: 'add', tooltip: 'Add new' }
    ]
  };

  const handleAction = (action) => {
    if (action === 'add') alert('Add new')
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      actionsConfig={actionsConfig}
      onAction={handleAction}
    />
  );
};

export default MyTable;

Row Selection

Select multiple rows with checkboxes.

You can use the onBulkAction prop to handle the bulk actions click.

Prop	Type	Default value	Description
`selectionConfig`	Object		Defines the selection buttons to be displayed in the table
└─ `actions`	Object[]		See Custom Actions for more info
└─ `clearSelection`	Boolean	true	Defines if the clear selection button is displayed
`onBulkAction`	Function		Defines the function to handle the bulk action click

Demo

Code

import React from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const data = [
    { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin', created_at: '2024-01-15' },
    { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User', created_at: '2024-01-20' },
    { id: '3', name: 'Carol', email: 'carol@example.com', role: 'Moderator', created_at: '2024-02-01' },
    { id: '4', name: 'David', email: 'david@example.com', role: 'User', created_at: '2024-02-10' },
    { id: '5', name: 'Eva', email: 'eva@example.com', role: 'Admin', created_at: '2024-02-15' },
    { id: '6', name: 'Frank', email: 'frank@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '7', name: 'George', email: 'george@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '8', name: 'Hannah', email: 'hannah@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '9', name: 'Isaac', email: 'isaac@example.com', role: 'User', created_at: '2024-03-01' },
    { id: '10', name: 'James', email: 'james@example.com', role: 'User', created_at: '2024-03-01' }
  ];

  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const paginationConfig = {
    showFirstLast: false,
    perPage: 5
  };

  const selectionConfig = {
    actions: [
      { action: 'edit', variant: 'warning', icon: 'edit', tooltip: 'Edit selected' }, 
      { action: 'delete', variant: 'error', icon: 'delete', tooltip: 'Delete selected' }
    ]
  };

  const handleBulkAction = (action, selectedData) => {
    if (action === 'edit') alert(`Edit selected: ${selectedData.length}`);
    else if (action === 'delete') alert(`Delete selected: ${selectedData.length}`);
  };
  
  return (
    <DataTable
      data={data}
      columns={columns}
      paginationConfig={paginationConfig}
      selectionConfig={selectionConfig}
      onBulkAction={handleBulkAction}
    />
  );
};

export default MyTable;

Advanced

Load data from an API endpoint (POST only).

Loading state is automatically handled by the component. Cache data is enabled by default.

You can also use the reloadData() method to clear the cache and reload the data (API mode only).

Prop	Type	Default value	Description
`data`	String \| Object[]		Defines the API endpoint to fetch the data from (full URL or relative path), see Basic for more info about the Object[] usage
`customParameters`	Object		Defines the additional parameters to be sent to the API

Request payload:

Prop	Type	Description
`filters`	Object	Filters values to apply to the request
`page`	Number	Page number
`perPage`	Number	Items per page
`search`	String	Search term to apply to the request
`sort`	Object	Sort order to apply to the request
└─ `column`	String	Column to sort by
└─ `ascending`	Boolean	Sort order (true for ascending, false for descending)
`customParameters`	Object	Defines the additional parameters to be sent to the API

Response structure:

Prop	Type	Description
`data`	Object[]	Data returned from the request
`distinctValues`	Object	Distinct values of the columns (for the filters)
`page`	Number	Page number
`perPage`	Number	Items per page
`total`	Number	Total number of items
`totalPages`	Number	Total number of pages

Demo

Code

import React, { useRef } from 'react';
import { DataTable } from 'react-daisy-components';

const MyTable = () => {
  const columns = [
    { key: 'id', label: 'ID' },
    { key: 'name' },
    { key: 'email' },
    { key: 'role' },
    { key: 'created_at', label: 'Created at' }
  ];

  const customParameters = { lang: 'en' }

  const dataTableRef = useRef(null);

  const actionsConfig = {
    actions: [
      { action: 'add', variant: 'success', icon: 'add', tooltip: 'Add new' }, 
      { action: 'reload', variant: 'info', icon: 'refresh', tooltip: 'Reload data' }
    ]
  };

  const handleAction = (action) => {
    if (action === 'add') alert('Add new');
    else if (action === 'reload') dataTableRef.current.reloadData();
  };

  const selectionConfig = {
    actions: [
      { action: 'edit', variant: 'warning', icon: 'edit', tooltip: 'Edit selected' }, 
      { action: 'delete', variant: 'error', icon: 'delete', tooltip: 'Delete selected' }
    ],
    clearSelection: false
  };

  const handleBulkAction = (action, selectedData) => {
    if (action === 'edit') alert(`Edit selected: ${selectedData.length}`);
    else if (action === 'delete') alert(`Delete selected: ${selectedData.length}`);
  };
  
  return (
    <DataTable
      data="/api/data.json"
      columns={columns}
      customParameters={customParameters}
      actionsConfig={actionsConfig}
      selectionConfig={selectionConfig}
      onAction={handleAction}
      onBulkAction={handleBulkAction}
      ref={dataTableRef}
    />
  );
};

export default MyTable;

MultiSelect

Powerful multi-selection component with search.

Import

import { MultiSelect } from 'react-daisy-components'

Basic

Simple multi-selection with predefined options.

Demo

Code

import React, { useState } from 'react';
import { MultiSelect } from 'react-daisy-components';

const options = ['Option 1', 'Option 2', 'Option 3'];
const [selected, setSelected] = useState([]);

return (
  <MultiSelect
    options={options}
    selected={selected}
    setSelected={setSelected}
  />
);