Bright Lab Dynamic Table

​

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.