Table Component Library - upn-table

Table component renders tabular data with various optional features such as pagination, filtering, sorting, and customizable actions.

Props

| Prop | Type | Description | | ---------------------- | --------------- | ------------------------------------------------------------------- | | data | Array<Object> | Array of data objects to display in the table. | | columns | Array<Object> | Array of column configurations defining headers and other settings. | | showShowEntries | boolean | Flag to display the entries per page selector. | | showEntriesOptions | Array<number> | Options for entries per page selector. | | showPagination | boolean | Flag to show the pagination component. | | tableCaption | string | Optional caption for the table. | | showViewall | boolean | Flag to display the "View All" button. | | showActions | boolean | Flag to show an actions column in the table. | | actionsHeader | string | Header text for the actions column. | | actionButtons | Array<Object> | Configuration for action buttons. | | showFilters | boolean | Flag to show the filter button and popup. | | filterOptions | Object | Configuration for filter options. | | exportButton | Object | Configuration for an export button. | | showCheckbox | boolean | Flag to show checkboxes for row selection. | | searchOptions | Object | Configuration for search options. | | gapped | boolean | Flag to add spacing between table cells. | | classNames | Object | Optional object containing CSS class names for customization. |

Example Usage

import React, { useState } from 'react';
import Table from './components/Table/Table';
import { ButtonConfig, Column, DataObject } from './types/TableTypes';
import { ChevronDown } from 'upn-icons';

const App: React.FC = () => {
  const columns: Column[] = [
    { key: 'id', header: 'ID', sortable: true },
    { key: 'profile', header: 'Profile', sortable: false, image: true },
    { key: 'name', header: 'Name', sortable: true },
    { key: 'details', header: 'Details', sortable: false },
    { key: 'svg', header: 'SVG' }
  ];

  const data: DataObject[] = [
    {
      id: 1,
      profile: { image: '../../assets/User.svg', name: 'John Doe' },
      name: 'John Doe',
      details: { age: 30, country: 'USA' },
      svg: <ChevronDown className="arrowDown-svg" />
    },
    {
      id: 2,
      profile: { image: '../../assets/User.svg', name: 'Jane Smith' },
      name: 'Jane Smith',
      details: { age: 25, country: 'Canada' }
    },
    {
      id: 3,
      profile: { image: '../../assets/User.svg', name: 'Michael Johnson' },
      name: 'Michael Johnson',
      details: { age: 40, country: 'UK' }
    },
    {
      id: 4,
      profile: { image: '../../assets/User.svg', name: 'Emily Brown' },
      name: 'Emily Brown',
      details: { age: 35, country: 'Australia' }
    },
    {
      id: 5,
      profile: { image: '../../assets/User.svg', name: 'Christopher Lee' },
      name: 'Christopher Lee',
      details: { age: 28, country: 'Germany' }
    },
    {
      id: 6,
      profile: { image: '../../assets/User.svg', name: 'Jessica Taylor' },
      name: 'Jessica Taylor',
      details: { age: 32, country: 'France' }
    },
    {
      id: 7,
      profile: { image: '../../assets/User.svg', name: 'Daniel Wilson' },
      name: 'Daniel Wilson',
      details: { age: 45, country: 'Japan' }
    },
    {
      id: 8,
      profile: { image: '../../assets/User.svg', name: 'Sarah Anderson' },
      name: 'Sarah Anderson',
      details: { age: 37, country: 'China' }
    },
    {
      id: 9,
      profile: { image: '../../assets/User.svg', name: 'John Doe' },
      name: 'Matthew Martinez',
      details: { age: 29, country: 'Brazil' }
    },
    {
      id: 10,
      profile: { image: '../../assets/User.svg', name: 'John Doe' },
      name: 'Ashley Thomas',
      details: { age: 31, country: 'India' }
    },
    {
      id: 11,
      profile: { image: '../../assets/User.svg', name: 'John Doe' },
      name: 'Ram Bahadur',
      details: { age: 31, country: 'Nepal' }
    },
    {
      id: 12,
      profile: { image: '../../assets/User.svg', name: 'John Doe' },
      name: 'Ashley Thomas',
      details: { age: 31, country: 'India' }
    },
    {
      id: 13,
      profile: { image: '../../assets/User.svg', name: 'John Doe' },
      name: 'Ashley Thomas',
      details: { age: 31, country: 'India' }
    },
    {
      id: 14,
      profile: { image: '../../assets/User.svg', name: 'John Doe' },
      name: 'Ashley Thomas',
      details: { age: 31, country: 'India' }
    },
    {
      id: 15,
      profile: { image: '../../assets/User.svg', name: 'John Doe' },
      name: 'Shyam Magar',
      details: { age: 31, country: 'Nepal' }
    }
  ];

  const handleEditClick = () => {
    // Handle edit button click
    console.log('edit button clicked');
  };

  const handleDeleteClick = () => {
    // Handle delete button click
    console.log('delete button clicked');
  };

  // Define button configurations
  const actionButtons: ButtonConfig[] = [
    { label: 'Edit', className: 'edit-btn', onClick: () => handleEditClick() },
    { label: 'Delete', className: 'delete-btn', onClick: () => handleDeleteClick() }
  ];

  const [selectedOption, setSelectedOption] = useState<string | null>('');
  const [invoiceId, setInvoiceId] = useState<string>('');
  const [patient, setPatient] = useState<string>('');
  const [category, setCategory] = useState<string | null>('All Category');
  const [date, setDate] = useState(new Date());

  return (
    <div className="App">
      <h1>Nested Table Example</h1>
      <Table
        data={data}
        columns={columns}
        showShowEntries
        showEntriesOptions={[1, 2, 5, 10, 15]}
        showPagination
        showViewall
        tableCaption="Users"
        showActions
        actionsHeader="Actions"
        actionButtons={actionButtons}
        showFilters
        filterOptions={[
          {
            label: 'Patient',
            type: 'text',
            props: {
              value: patient,
              onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
                setPatient(e.target.value);
              },
              placeholder: 'Patient Name, Patient ID, P...'
            }
          },
          {
            label: 'Category',
            type: 'dropdown',
            options: ['Dropdown 1 ', 'Dropdown 2 ', 'Dropdown 3'],
            value: category,
            onSelect: () => {
              setCategory(category);
            }
          },
          {
            label: 'Date of Joining',
            type: 'date',
            selectedDate: date,
            setSelectedDate: (date: Date) => {
              setDate(date);
            }
          }
        ]}
        saveAsDraftButton={{
          label: 'Save as Draft',
          onClick: () => {
            console.log('saved as draft');
          }
        }}
        showCheckbox
        searchOptions={{
          startDate: true,
          endDate: true,
          columnSearches: [
            {
              label: 'Supplier Name',
              type: 'dropdown',
              options: ['Dropdown 1 ', 'Dropdown 2 ', 'Dropdown 3'],
              value: selectedOption,
              onSelect: (selectedOpt: string) => {
                setSelectedOption(selectedOpt);
              }
            },
            {
              label: 'Invoice ID',
              type: 'text',
              props: {
                value: invoiceId,
                onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
                  setInvoiceId(e.target.value);
                }
              }
            }
          ]
        }}
        exportButton={{
          label: 'Export',
          onClick: () => {
            console.log('Exported');
          }
        }}
        // gapped
      />
    </div>
  );
};

export default App;