​

Installation

@bright-lab/dynamictable

@bright-lab/dynamictable is available as an [npm package] (https://www.npmjs.org/package/@bright-lab/dynamictable)

// with npm
npm install @bright-lab/dynamictable

// with yarn
yarn add @bright-lab/dynamictable

What is so powerful about the Dynamic Table ?

This table is so smart that it will handle everything for you, as well as modern looking UI, dark theme, custom styles, and responsiveness!

Getting started with @bright-lab/dynamictable

Here is an example of a basic app using @bright-lab/dynamictable

in App.tsx, Import the required css file.

import '@bright-lab/dynamictable/css';

In Table.tsx, let's import useEffect, useState and the DynamicTable

import { useEffect, useState } from 'react';
import { DynamicTable } from '@bright-lab/dynamictable';

Now, Let's fetch the data and handle our states. In this example we will use axios.

import axios from 'axios';

type data = {
  id: string;
  key: string;
  title: string;
  details: [
    {
      image_url: string;
    }
  ];
};

  const [data, setData] = useState<data[]>([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    total: 0,
    currentPage: 1,
    showPerPage: 5,
  });
  const [search, setSearch] = useState('');
  const [sorting, setSorting] = useState({
    key: '',
    order: '',
  });

  const url = `https://example.com/banners?page=${
    pagination.currentPage
  }&limit=${pagination.showPerPage}${search && `&search=${search}`}${
    sorting.key &&
    sorting.order &&
    `&sortKey=${sorting.key}&sortOrder=${sorting.order}`
  }`;

    const handleFetch = async () => {
    setLoading(true);

    try {
      const { data } = await axios.get(url);
      setData(data.data);
      setPagination((prev) => ({
        ...prev,
        total: data.total,
        currentPage: data.page,
      }));

    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    handleFetch();
  }, [search, sorting, pagination.currentPage, pagination.showPerPage]);

Now that we have set the data, pagination, sorting and search. Let's go ahead and create the columns.

const columns = [
  {
    header: 'ID',
    accessor: 'id',
    style: {
      width: '120px',
      textAlign: 'left',
      maxWidth: '120px',
    },
  },
  {
    header: 'Key',
    accessor: 'key',
    style: {
      width: '150px',
      textAlign: 'left',
      maxWidth: '150px',
    },
  },
  {
    header: 'Title',
    accessor: 'title',
    style: {
      width: '250px',
      minWidth: '150px',
      textAlign: 'left',
      maxWidth: '250px',
    },
    Cell: ({ value }: { value: string }) => {
      return <span className="truncate">{value}</span>;
    },
  },
  {
    header: 'Image',
    accessor: 'details[0].image_url',
    sortable: false,
    style: { width: '240px', textAlign: 'left', maxWidth: '240px' },
    Cell: ({ value }: { value: string }) => {
      return (
        <div className="h-[70px] w-[150px]">
          <img src={value} alt="Banner" className="w-full h-full object-fill" />
        </div>
      );
    },
  },

  {
    header: 'Actions',
    style: { width: '100px', textAlign: 'left', maxWidth: '100px' },
    Cell: ({ row }: { row: data }) => {
      return (
        <span>
          <button
            className="border border-gray-400 p-1 rounded-md cursor-pointer"
            onClick={() => {
              console.log(row.id);
            }}
          >
            Show ID
          </button>
        </span>
      );
    },
  },
];

Finally, lets return the Dynamic Table.

return (
  <div className="w-full h-screen bg-slate-50">
    <div className="max-w-[1000px] mx-auto">
      <DynamicTable
        columns={columns} // required
        data={data} // required
        loading={loading} // required
        setPagination={setPagination} // required
        pagination={pagination} // required
        setSorting={setSorting}
        sorting={sorting}
        onSearch={setSearch}
      />
    </div>
  </div>
);

CSS Styling

:root {
  --dt-font-size: 0.875rem;
  --dt-main-spacing: 1.5rem 1rem;
  --dt-main-border-radius: 0.375rem;
  --dt-border-color: #cccccc40;
  --dt-main-bg-color: #ffff;
  --dt-header-bg-color: #f8f9f720;
  --dt-header-text-color: #71717a;
  --dt-body-text-color: #26262a;
  --dt-body-spacing: 0.5rem 1rem;
  --dt-footer-text-color: #09090b;
  --dt-loader-color: #4c00ff;
  --dt-sorting-icon-color: #000;
}

Additional Props

| Property | Type | Initial State | Description | | ----------------- | -------------------- | ----------------- | ---------------------------------------------------------------------------- | | limitPageSize | Array of numbers | [5, 10, 20, 40] | Show Per Page | | darkMode | Boolean | false | Dark Color Table | | headerComponent | JSX | null | Will be rendered in the top right far corner (Create Button for example) |

Changelog

The changelog is regularly updated to reflect what's changed in each new release.