Data Table NextUI (Beta)

A Super Data Table Utils like datatable but with integration with NextUI and FontAwesome

Installation

Make sure you already install NextUI and FontAwesome

  npm i datatable-nextui-lost

Usage/Examples

import DataTable from 'datatable-nextui-lost'
const data = [
    {
      key: 1,
      no: 1,
      name: 'Losinto',
      status: 'Active',
      action: <Button color="warning">Edit</Button>,
    },
  ];
function App() {
  return <DataTable columns={['Name', 'Status', 'Action']} data={data} />
}

Data Format

import DataTable from 'datatable-nextui-lost'
...
const data = [
    {
      key: 1, (Required)
      no: 1, (Required)
      ...columns: ...values,
    },
  ];

example :

import DataTable from 'datatable-nextui-lost'
...
const data = [
    {
      key: 1,
      no: 1,
      name: 'Losinto',
      status: 'Active',
    },
  ];

function App() {
  return <DataTable columns={['Name', 'Status']} data={data} />
}

if you want to add a JSX Element in you column like a edit or delete button, you can add like this :

import DataTable from 'datatable-nextui-lost'
...
const data = [
    {
      key: 1,
      no: 1,
      name: 'Losinto',
      status: 'Active',
      action: <Button color="warning">Edit</Button>,
    },
  ];
  return (
    <div className="p-10">
      <DataTable columns={['Name', 'Status', 'Action']} data={data} />
    </div>
  );

Searchable

if you want to enable searchable on the DataTable NextUI Lost, you can add "isSearchable" props like this :

import DataTable from 'datatable-nextui-lost';
...
<DataTable columns={['Name', 'Status', 'Action']} isSearchable data={data} />

But, you must add the "searchFilterColumn" to make the search find your data like this :

import DataTable from 'datatable-nextui-lost';
...
<DataTable columns={['Name', 'Status', 'Action']} isSearchable data={data} searchFilterColumn={['Name']} />

Don't worry, if you want to make a many column to search, you can add it, its array.

Note : make sure your searchFilterColumn is same with a columns values

Extra Content

You maybe want to add like button "Add User" to add, so we make the extraContent to you to add your extra content like this :

import { Button } from '@nextui-org/react';
import DataTable from 'datatable-nextui-lost';
...
  const AddUser = () => {
    return <Button color='primary'>Add User</Button>
  }

  return (
    <div className="p-10">
      <DataTable 
      columns={['Name', 'Status', 'Action']} 
      isSearchable 
      data={data} 
      searchFilterColumn={['Name']} 
      extraContent={<AddUser />} />
    </div>
  );

End Credit

Support to : NextUI, FontAwesome, and Me:)

Donation for Supports:

https://sociabuzz.com/fanandha35

https://saweria.co/LosintoPalamos

Thanks for using:)

Authors

• @LostInLost