my-data-table-component

RDF Data Table

A reusable data table component built with RDF Data Fetcher.

Installation

npm install rdf-data-table

Features

• Built on top of RDF Data Fetcher for seamless data fetching
• Support for both static and dynamic data
• Customizable column rendering
• Loading and error states
• TypeScript support

Usage

Basic Usage with Static Data

import { DataTable } from 'rdf-data-table';

interface User {
  id: number;
  name: string;
  email: string;
}

const columns = [
  { key: 'id', header: 'ID' },
  { key: 'name', header: 'Name' },
  { key: 'email', header: 'Email' }
];

const data = [
  { id: 1, name: 'John Doe', email: '[e-mail]' },
  { id: 2, name: 'Jane Smith', email: '[e-mail]' }
];

function MyComponent() {
  return (
    <DataTable
      data={data}
      columns={columns}
    />
  );
}

Usage with Data Fetching

import { DataTableWithFetch, registerDataTable } from 'rdf-data-table';
import { createAsyncLarge } from 'rdf-data-fetcher';

interface User {
  id: number;
  name: string;
  email: string;
}

const columns = [
  { key: 'id', header: 'ID' },
  { key: 'name', header: 'Name' },
  { key: 'email', header: 'Email' }
];

// Create a fetch function
const fetchUsers = async () => {
  const response = await fetch('https://api.example.com/users');
  return response.json();
};

// Create a configured fetch function
const asyncUsers = createAsyncLarge(fetchUsers, { config: 'server' });

// Register the fetch function
registerDataTable(asyncUsers, 'users');

function MyComponent() {
  return (
    <DataTableWithFetch
      columns={columns}
      fetchFunction={asyncUsers}
      componentName="users"
    />
  );
}

Custom Column Rendering

const columns = [
  { key: 'id', header: 'ID' },
  { 
    key: 'name', 
    header: 'Name',
    render: (value, row) => (
      <div className="user-name">
        <span className="first-name">{value}</span>
        <span className="last-name">{row.lastName}</span>
      </div>
    )
  },
  { key: 'email', header: 'Email' }
];

Props

DataTableProps

Prop	Type	Description
data	T[]	Array of data to display
columns	Column[]	Array of column definitions
loading?	boolean	Loading state
error?	Error	Error state
className?	string	Additional CSS classes

DataTableWithFetchProps

Prop	Type	Description
columns	Column[]	Array of column definitions
fetchFunction	FetchFunction<T[]>	Function to fetch data
componentName	string	Name of the component for registry
className?	string	Additional CSS classes

License

MIT