talec-table v1.2.2

🔴 Attention: This repository is not actively maintained or updated. This is a component created for the project 14 of the Open Classrooms Javascript-React Dev course : Faites passer une librairie jQuery vers React. Thank you for your understanding and support! 💻🙌.

This is a table component for react native.

• Minimal Settings
  • Lines Data
  • Titles Data
  • Hide Data
• Custom Settings
  • Custom Styles
  • Custom Columns
  • Custom Actions
  • Custom Labels
  • Custom Length
  • Custom Search
• Properties
• Notice
• License

Minimal Settings

npm install talec-table

Lines

const myData = [
  {FN:"Peter",LN:"Parker",AL:"SpiderMan",D1:"1962-08-01",CO:"Red",SY:"🕷",WE:76,UN:"Marvel"},
	...];

Titles

const myTitles = {
	FN: "1st Name",
	LN: "Last Name",
	AL: "Alias",
	D1: "#1 Comic",
	CO: "Color",
	SY: "Symbol",
	WE: "Weight",
	UN: "Universe",
};

USE:

import React from "react";
import {TalecTable} from "talec-table";

import myData from "path";

function myPage(){
  const myTitles = {
    FN: "1st Name", LN: "Last Name", AL: "Alias", D1: "#1 Comic",
    CO: "Color", SY: "Symbol", WE: "Weight",	UN: "Universe"};

  return(
    <div><TalecTable lines={myData} titles={myTitles}/><div>
  )
}

Hide

USE:

import React from "react";
import {TalecTable} from "talec-table";

import myData from "path";

function myPage(){
  const myTitles = {
    FN: "1st Name", LN: "Last Name", AL: "Alias", D1: "#1 Comic",
    CO: "Color", SY: "Symbol", WE: "Weight",	UN: "Universe"};
  const dataToHide =["CO","UN"]

  return(
    <div><TalecTable lines={myData} titles={myTitles} hide={dataToHide}/><div>
  )
}

Custom Settings

Styles

By passing a css object in the custom prop, you can change the display of the lines. The keys titleStyle, evenLineStyle and oddLineStyle are the targets.

const myCustom = {
	titleStyle: { backgroundColor: "orange" },
	evenLineStyle: { backgroundColor: "purple" },
	oddLineStyle: { backgroundColor: "yellow" },
};

USE:

import React from "react";
import {TalecTable} from "talec-table";

import myData from "path";
import myTitles from "path";

function myPage(){
 const myCustom = {
	titleStyle: { backgroundColor: "lightskyblue" },
	evenLineStyle: { backgroundColor: "lightblue" },
	oddLineStyle: { backgroundColor: "lightcyan" },
}

  return(
    <div><TalecTable lines={myData} titles={myTitles} custom={myCustom}/><div>
  )
}

Columns

You might want to change the order of the columns, and define a custom width for each. The prop custom.columns is here for you. Only the keys included in values will be displayed, therefor you can either choose to use the previous prop hide with the full list of keys, or just shorten the list here. Make sure your total width do not exceed 100%...

const myColumns = {
	columns: {
		values: ["UN", "D1", "LN", "FN", "AL", "SY", "CO"],
		width: ["10%", "", "15%", "15%", "15%", "8%", "6rem"],
	},
};

USE:

import React from "react";
import {TalecTable} from "talec-table";

import myData from "path";
import myTitles from "path";

function myPage(){
 const myColumns = {
	columns: {
		values: ["UN", "D1", "LN", "FN", "AL", "SY", "CO"],
		width: ["10%", "", "15%", "15%", "15%", "8%", "6rem"],
	},
};

  return(
    <div><TalecTable lines={myData} titles={myTitles} custom={myColumns}/><div>
  )
}

Actions

const customAction = {
	actionColumn: {
		name: "Actions",
		actions: [
			{
				icon: <BsTrash3Fill />,
				func: deleteItem,
				target: "AL",
				label: "delete",
			},
		],
	},
};

USE:

import React from "react";
import {TalecTable} from "talec-table";
import { BsTrash3Fill} from "react-icons/bs";

import myData from "path";
import myTitles from "path";

function myPage(){

const deleteItem =(item)=>{
  //your logic here
  console.log(item)}

 const customAction = {
	actionColumn: {
		name: "Actions",
		actions: [
			{
				icon: <BsTrash3Fill />,
				func: deleteItem,
				target: "AL",
				label: "delete",
			},
		],
	},
};

  return(
    <div><TalecTable lines={myData} titles={myTitles} custom={customAction}/><div>
  )
}

Labels

const customText = {
	text: {
		itemPerPage: "How many Heros per page ? ",
		search: "Seeking help ?",
		showingItems: ["Digging Hero #", "to", "out of"],
	},
};

USE:

import React from "react";
import {TalecTable} from "talec-table";

import myData from "path";
import myTitles from "path";

function myPage(){
  const customText = {
	text: {
		itemPerPage: "How many Heros per page ? ",
		search: "Seeking help ?",
		showingItems: ["Digging Hero #", "to", "out of"],
	},
};

  return(
    <div><TalecTable lines={myData} titles={myTitles} custom={customText}/><div>
  )
}

Pagination Length

const customLength = { lengthChoice: [6, 12, 25, 60] };

USE:

import React from "react";
import {TalecTable} from "talec-table";

import myData from "path";
import myTitles from "path";

function myPage(){
  const customLength = { lengthChoice: [6, 12, 25, 60] };

  return(
    <div><TalecTable lines={myData} titles={myTitles} custom={customLength}/><div>
  )
}

Narrowing search

const customSearch = { searchCol: ["AL", "CO"] };

USE:

import React from "react";
import {TalecTable} from "talec-table";

import myData from "path";
import myTitles from "path";

function myPage(){
  const customSearch = { searchCol: ["AL", "CO"] };

  return(
    <div><TalecTable lines={myData} titles={myTitles} custom={customSearch}/><div>
  )
}

Properties

Notice

License

MIT