david-mi-react-table v3.6.1

Description

A react package to create a table with integrated functionalities

Functionalities

Sorting data

When clicking on a column heading, you can arrange data in 3 ways

• Sorting in ascending order
• Sorting in descending order
• default (non sorted, like it was originally)

Filtering data

When writing text on the search input, only rows who have cells that includes written text will be displayed

• Sorting state is being kept after filtering

Paginating data

A pagination system is being used to navigate through the pages and limiting amount of displayed data on the screen

• Go to next page
• Go to previous page
• Go to page specified by button (if there is a lot of data, limiting amount of displayed page buttons)
• Go to page specified in "Go to" input

Retrieving data information

A section is made on the bottom left to display informations about the data being processed

• You can visualize the entries range of the current page (Example : Showing 41 to 50 of 500 entries)
• You can see the number of total entries, ignoring filtering

Installation

npm i david-mi-react-table

Example

import "david-mi-react-table/style.css";
import { Table } from "david-mi-react-table";

const columns = [
  { title: "Title", accessor: "title" },
  { title: "Rating (/20)", accessor: "rating" },
];

const rows = [
  { title: "ARK: Survival Evolved", rating: 12 },
  { title: "Trials Fusion", rating: 17 },
  { title: "Counter-Strike: Source", rating: 18 },
  { title: "Dungeon Defenders", rating: 16 },
  { title: "Trials Evolution Gold Edition", rating: 18 },
  { title: "Borderlands 2", rating: 18 },
  { title: "Portal 2", rating: 19 },
  { title: "Deep Rock Galactic", rating: 15 },
  { title: "Counter-Strike 2", rating: 15 },
  { title: "Borderlands GOTY", rating: 13.5 },
  { title: "Fallout 4", rating: 16 },
  { title: "Orcs Must Die! 2", rating: 16 },
  { title: "Borderlands: The Pre-Sequel", rating: 15 },
];

function App() {
  return (
    <Table 
      columns={columns}
      rows={rows} 
     />
  );
}

Result

Typescript Example

You can import Row and Column types to reinforce typing They accept a generic wich are keys of a row data schema

You can avoid using Row and Column types aswell, is it not required but recommended as you will get more precise warnings

import "david-mi-react-table/style.css";
import { Table, Row, Column } from "david-mi-react-table";

interface Game {
  title: string;
  rating: number;
}

const columns: Column<keyof Game>[] = [
  { title: "Title", accessor: "title" },
  { title: "Rating (/20)", accessor: "rating" },
];

const rows: Row<keyof Game>[] = [
  { title: "ARK: Survival Evolved", rating: 12 },
  { title: "Trials Fusion", rating: 17 },
  { title: "Counter-Strike: Source", rating: 18 },
  { title: "Dungeon Defenders", rating: 16 },
  { title: "Trials Evolution Gold Edition", rating: 18 },
  { title: "Borderlands 2", rating: 18 },
  { title: "Portal 2", rating: 19 },
  { title: "Deep Rock Galactic", rating: 15 },
  { title: "Counter-Strike 2", rating: 15 },
  { title: "Borderlands GOTY", rating: 13.5 },
  { title: "Fallout 4", rating: 16 },
  { title: "Orcs Must Die! 2", rating: 16 },
  { title: "Borderlands: The Pre-Sequel", rating: 15 },
];

function App() {
  return <Table columns={columns} rows={rows} />;
}

Props

| Props | type |Description | Required | |--|--|--| -- | | rows | Array | rows to display on table | true | | columns | Array | columns heads | true | | classNames | Object | custom class names to apply on table container and it's elements | false | | colors | Object | custom colors to apply on table | false |

Column

| Key name | Type | Description | Required | |--|--|--|--| | title | string | title to display on column head | true | | accessor | string | accessor to target the correct cells | true |

{ 
  /* title that will be displayed at column head*/
  title: "First name",
  /* reference to a row key */
  accessor: firstName
}

Row

| Key name | Type | Description | Required | |--|--|--|--| | < key > | string or number | row value | true |

{ 
  /* row key with it's value */
  firstName: "David"
}

classNames

| Key | Type | Description | Required | |------------------------------------|--------|------------------------------------------| -- | | container | string | main container | false | | tableContainer | string | table wrapper | false | | table | string | table element | false | | pageSelect | string | select page menu on top left| false | | search | string | search menu on top right | false | | informations | string | informations part on bottom left | false | | navigation | string | navigation menu on bottom right | false | | footer | string | informations and navigation menus wrapper | false |

colors

| Key | Type | Description | Required | |------------------------------------|--------|------------------------------------------| -- | | hover | string | Table hover (heading, rows and buttons) | false | | button | string | Table buttons | false | | buttonCurrentPage | string | Table button matching the current page number | false | | buttonDisabled | string | Table disabled buttons | false | | sortArrow | string | sorting arrows on heading | false | | sortArrowActive | string | the arrow representing the direction of current sorted column, if chosen (asc or desc. )| false | | head | string | table heading| false |

Types

interface Column<T> {
  title: string,
  accessor: T
}

type Row<T extends string> = {
  [key in T]: string | number
}

interface ClassNames {
  container?: string
  tableContainer?: string
  table?: string
  pageSelect?: string
  search?: string
  informations?: string
  navigation?: string
  footer?: string
}

interface Colors {
  hover?: string,
  button?: string
  buttonCurrentPage?: string
  buttonDisabled?: string
  sortArrow?: string
  sortArrowActive?: string
  head?: string
}

export interface TableProps<T extends string> {
  columns: Column<T>[],
  rows: Row<T>[]
  classNames?: ClassNames
  colors?: Colors
}

CodeSandbox demos

React : Link

React Typescript : Link

NextJs : Link