`ts

interface Icolumn {
//Used to get string data from the each row object
field: string, //This field can have a full stop(.) will allow us to read further into nested objects

//This will be used to display in the table heading.
use: string,

//Indicates that of this column should be used to search (optional). defaults to true.
use_in_search?: boolean,

//Indicates If this property should be used displayed in the table header (optional). defaults to true.
use_in_display?: boolean,

//Indicates if this field can be exported on the CSV (optional) defaults to true.
use_in_export?: boolean,
};

type Icolumns = Icolumn[]

/**
* The Example rows above can have its column data looking thus.
*/

var columns:Icolumns = [
{
field: "front_end_position.name.full_name",
use: "Position",
//Will not be used in search filtering
use_in_search:false
},
{
field: "name",
use: "Player Name",
},
{
field: "country_id",
use: "Country",

//Will not be displayed in the table
use_in_display: false
},
{
field: "club_id",
use: "Club Details",
//would not be exported as a CSV column
use_in_export: false

}
]

`

$3

This is a number type that indicates how many rows per page should be displayed. By default the value is set at 10,
You can decrease or increase this value.

$3

The table usually has a header which is set as an empty string, this can be set as a string alone.

$3

A developer might want to customize the data displayed to a user, I really want him to have that power. I ensured that can happend by using reacts render props .

Its abolutely optional but gets
- The current row object
- The current column object
- The supposed display property

See an example below.

`tsx

type Irender_row = (row: Irow, col: Icolumn,display_value:any) => JSX.Element | string;

class App extends React.Component {

constructor(props) {
super(props)
}

rowcheck:Irender_row = (row,column, display_value) => {

if (column.field === "club_id") {
return View Club Details
}

if (column.field === "name") {
return {display_value}
}

return display_value
}

render() {
return

To have a unique search feature, I debounced the users input, so as to trigger a search when there is no keyboard click for 300 milli seconds. You can use the debounce_search prop to make it shorter or longer(must be in milli seconds).
To make the component fast and keep it smooth (Since a search goes through all rows: a high data application might have thousands of rows) I defeered the search into a non blocking promise. You can trust that your application performance will not be affected by this table component.

$3

Having a full grasp of all that is happening inside the table component can be very helpful in order to aid debugging and also know user behavior. The search field can fire events as user go ahead to filter through the table. Pass a function to the on_search prop. The definition is thus
`ts
type searchCallback = (search_word: string, result?: Irow[] | []) => void
`

$3

When there is no data to display (rows props is empty), the No Data Availaible text is shown. The no_content_text props controls the text.

$3

By default, the search input form is visible, to hide it, pass a false to the show_search prop.

$3

The CSV download is enabled by default, this behaviour can be turned off by passing a false to the should_export prop.

$3

The text for CSV download button defaults to Export, this can be changed using the export_text prop.

$3

Downloaded CSV file will always have a name. This defaults to download.csv, change this name by passing a string to the export_csv_file prop. This would be suffixed with the .csv expension during download.

$3

You might want to make some final touch to each row data that gets displayed on the CSV. This function will be invoked with the current column and row and actual value to be displayed on the CSV cell. It's type is defined below.

`ts
export type stringRenderFunc = (row: Irow, col: Icolumn, display_value: string) => string;
`

$3

To show the multi select input means you have a desire to take action due to the multiple selected data on on the table. this will be possible if a non-empty string array is passed into the bulk_select_options props. E.g ->
`jsx


The button that allows action to be taken for multi selected items has a default text of Apply. this can be changed using the bulk_select_button_text prop.

$3

When a user has selected multiple items and clicks away on the Apply button, this callback function will be invoked with two parameters which are
1. The option selected from the dropdown.
2. An array of rows selected on the table.
`ts
type callback = (selected_option: string, selected: Irow[]) => void,
`

$3

Borrowing a concept from boostrap tables: To have the table with a striped bg-gray-50 at even rows, pass a boolean value to the striped prop. It defaults to true.

$3

A bg-gray-50 color can be applied on a row when the mouse hovered over it. Control this by passing a boolean to the hovered prop. It defaults to true.

$3

The borders of a the table can be controlled with the bordered prop.

Customization and Custom Styling

Quite a number of request came for this feature and I also saw the need to allow users thinker around how they use design, re-design and use the component to their taste.

The table is broken down into 4 major sections which are

* Table Top !react-tailwind-table Table Top

* Table Head !react-tailwind-table Table Head

* Table Body !react-tailwind-table Table Body

* Table Footer !react-tailwind-table Table Footer

To customize any section of this 4 parts, the styling props takes quite a large object that can help you customize fully.

> NOTE these customizations happens by appending your self defined class into each section of the table. So in case your desired effect does not take place, you can super-impose by adding a !inmportant in your class declaration. The base_bg_color and base_text_color color below controls the current coloring of the table.

`ts
interface ItableStyle {
base_bg_color?: string, //defaults to bg-pink-700
base_text_color?: string,//defaults to text-pink-700
main?: string, //The container holding the table
top?: {
title?: string,
elements?: { // The elements include the search, bulk select and csv download components
main?: string, //The row holding these components
search?: string,
bulk_select?: {
main?: string, // styling targets the dropdown
button?: string
},
export?: string
}
},
table_head?: {
table_row?: string, // The

Setting up the table component is the easiest thing ever 😀 .The example below is found in our examples folder

`tsx

import React from 'react'
import Table from 'react-tailwind-table'
import 'react-tailwind-table/dist/index.css' //use for a non tailwind project


class App extends React.Component {

constructor(props) {
super(props)

this.state={
columns:column(),
rows: fakePlayers()
}
}


rowcheck = (row,column, display_value) => {

if (column.field === "created_at") {
return See button
}

if (column.field === "name") {
return {display_value}
}

return display_value
}

render() {
return

``

Looks and Feel

!react-tailwind-table

License

MIT © mklef121