MS React Table

Table of Contents

• Overview
• Installation
• Example
  • Basic Setup
  • Client Side Rendering
  • Row Selection
  • Filter
  • Column Setup
  • Server Side Rendering
• License

Overview

Ms-react-table is a lightweight, customizable React table component designed for modern enterprise applications.

Features

• Easy integration with React and TypeScript projects
• Configurable columns with flexible rendering
• Built-in sorting and filtering logic
• Resizable and visibility management
• Optimized for performance with large datasets
• Styled to blend seamlessly with default framework aesthetics

Installation

You can install ms-react-table via npm:

$ npm install ms-react-table

Once the package is installed, you can import the library using import or require approach:

import MsReactTable from 'ms-react-table';
import 'ms-react-table/dist/index.css';
import type { MsTablePropsTypes, MsTableHeaderCellTypes, rowSelectionConfig } from 'ms-react-table';

Exports Explained

| Export Name | Type | Description | |----------------------------|-----------|----------------------------------------------------------| | MsReactTable | Component | The primary table UI component for React applications. | | MsTablePropsTypes | Type | Table props TypeScript type for prop validation. | | MsTableHeaderCellTypes | Type | Header cell definition type for table columns. | | rowSelectionConfig | Type | Row Selection Configuration. |

MsReactTable assembles the table's structure, context, and layout, and enables pagination.

Example

Basic Setup

import React from 'react';
import MsReactTable from 'ms-react-table';
import 'ms-react-table/dist/index.css';

const UserList = () =>{
  const columns=[
    { 
      title: 'Name', 
      dataIndex: 'name', 
      width: 100
    },
    { 
      title: 'Age', 
      dataIndex: 'age', 
      width: 100
    },
    ...
  ]

  const users = [
    {
      name: 'Abhijit Verma',
      age: 30,
      ...
    }
  ]
  return (
    <>
      <MsReactTable 
        columns={columns}
        data={users}
      />
    </>
  )
}

Props List and description :

| Prop | Type | Description | Default | |-----------------------------|----------------------------------------------------------------------|------------------------------------------------------------------|-----------------| | columns | MsTableHeaderCellTypes[] | Defines table column headers and configuration. | - | | data | any[] | Array of row data to render in the table. | - | | isLoading | true \| false | Shows loading state (e.g., spinner) when data is being fetched. | false | | height | string | Sets fixed height for the table container. | 200px | | isClientSideRendering | boolean | Enables client-side rendering of data (vs. server-side). | true | | showPagination | boolean | Toggles pagination controls visibility. | true | | pageSizeOptions | number[] | List of selectable page sizes for pagination. | [20,50,100] | | defaultPageSize | number | Default number of rows per page. | 50 | | className | string | Custom CSS class for the table wrapper. | - | | headerClassName | string | Custom CSS class for the table header. | - | | style | React.CSSProperties | Inline styles for the table container. | - | | ref | React.RefObject<GridFunctions> | Ref exposing table functions (e.g., imperative methods). | - | | customComponentForNoRecords | React.ReactNode | Custom component to show when no records are available. | - | | customComponentForFooter | React.ReactNode | Custom component to render in the table footer left section. | - | | hideDefaultFilterButton | true \| false | Hides the default filter button in the header. | false | | rowSelectConfig | rowSelectionConfig | Configuration for row selection (checkboxes, rules). | - | | onPageChange | (currentPage: number, pageSize: number) => void | Callback when pagination changes. | - | | onSortChange | (dataIndex: string, sortKey: 'asc' \| 'desc' \| null) => void | Callback when sorting changes on a column. | - | | onFilterChange | (dataIndex: string, filterValue: any) => void | Callback when a filter value changes. | - | | onRowSelect | (rowData: any) => void | Callback when a row is selected. | - | | setRowData | (pageNo: number, pageSize: number, filters: filterValuesType, sortBy: { key: string, sortBy: sortDirection }) => void | Function to update table data (usually for server-side fetch). | - |

Note : User RefObject to get access ms-react-table functions.

Client Side Rendering

const ClientSideRender = () => {
  const gridRef = useRef<GridFunctions>(null!)
  const columns: MsTableHeaderCellTypes[] = [
    { title: 'Name', dataIndex: 'name', width: 100 },
    { title: 'Status', dataIndex: 'active', type: 'boolean', width: 100 },
    { title: 'Age', dataIndex: 'age', width: 100, resizable: false, type: 'number', },
    {
      title: 'University', dataIndex: 'university', width: 400
    },
    { title: 'Gender', dataIndex: 'gender' },
    { title: 'Email', dataIndex: 'email', width: 100 },
    { title: 'Phone', dataIndex: 'phone', width: 100 },
    { title: 'Birth Date', dataIndex: 'dob', width: 300, type: 'date' },
    { title: 'Role', dataIndex: 'role', width: 300 },
    { title: 'hobby', dataIndex: 'hobby', width: 300 },
    { title: 'Created Date', dataIndex: 'createdDate', width: 150,type: 'date' },
  ]

  const users = [
    {
        "name": "Lowell Kassulke I",
        "active": true,
        "age": 40,
        "gender": "Female to male transgender man",
        "phone": "729.308.6202 x5063",
        "email": "[email protected]",
        "city": "Ameliafort",
        "country": "India",
        "dob": "2002-02-27",
        "university": "Macejkovic - Cole University",
        "hobby": "than",
        "photo": "https://avatars.githubusercontent.com/u/43808697",
        "role": "Mitchell - Barton",
        "createdDate": "1968-10-08"
    },
    {
        "name": "Claudia McLaughlin",
        "active": false,
        "age": 44,
        "gender": "Man",
        "phone": "715-952-8923 x885",
        "email": "[email protected]",
        "city": "Gulfport",
        "country": "Denmark",
        "dob": "1981-06-17",
        "university": "Kreiger, Witting and McCullough University",
        "hobby": "with",
        "photo": "https://avatars.githubusercontent.com/u/244402",
        "role": "Schmidt, Bernier and Waelchi",
        "createdDate": "1978-11-22"
    },
  ]

  return (
    <>
      <MsReactTable
        columns={columns}
        data={users}
        height='400px'        
        onRowSelect={(data:any)=>{console.log('Selected Row Data:', data)}}
      />
    </>
  )
}

Row Selection

<MsReactTable
  rowSelectConfig={{
      showHeaderCheckbox:true,
      selectionMode:'multiple', // single or multiple
      headerCheckBoxTitle:'',
  }}
  columns={columns}
  data={users}
  height='400px'        
  onRowSelect={(data:any)=>{console.log('Selected Row Data:', data)}}
/>

Result For Single Selection

Result For Multi Selection

Filter

ms-react-table have default enabled for filter, you just need to Add isFilterEnabled: true to header cell config.

const columns: MsTableHeaderCellTypes[] = [
  { title: 'Name', dataIndex: 'name', width: 100, isFilterEnabled: true },
  { title: 'Status', dataIndex: 'active', type: 'boolean', width: 100, isFilterEnabled: true, displayAs: { true: 'Enable', false: 'Diable' } },
  { title: 'Age', dataIndex: 'age', width: 100, resizable: false, type: 'number', isFilterEnabled: true },
  {
    title: 'University', dataIndex: 'university', width: 400, isFilterEnabled: true,
    cellRenderer: (rowData, dataIndex) => {
      return <div style={{ color: 'red' }} >{rowData[dataIndex]}</div>
    }
  },
  { title: 'Gender', dataIndex: 'gender' },
  { title: 'Email', dataIndex: 'email', width: 100, isFilterEnabled: true },
  { title: 'Phone', dataIndex: 'phone', width: 100 },
  { title: 'Birth Date', dataIndex: 'dob', width: 300, isFilterEnabled: true, type: 'date' },
  { title: 'Role', dataIndex: 'role', width: 300, isFilterEnabled: true },
  { title: 'hobby', dataIndex: 'hobby', width: 300 },
  { title: 'Created Date', dataIndex: 'createdDate', width: 150, isFilterEnabled: true, type: 'date' },
]

Filter View

if you need your custom button to hide/show Filter Modal use RefObject as below jsx

<>
  <button onClick={()=>gridRef?.current.showFilterModal(true)}>Show Filter</button>
  <MsReactTable
    rowSelectConfig={{
        showHeaderCheckbox:true,
        selectionMode:'single',
        headerCheckBoxTitle:'',
      }}
    columns={columns}
    data={users}
    height='600px'      
    hideDefaultFilterButton={true}   // This prop will hide default filter toggle button from footer
  />
</>

Data Type used in filter

• String
• Integer
• Boolean (this will have radio button)
• Date

Use DisplayAs key to override true and false text

{ title: 'Status', dataIndex: 'active', type: 'boolean', width: 100, isFilterEnabled: true, displayAs: { true: 'Enable', false: 'Disable' } },

Column Setup

{
  title: 'Action', 
  dataIndex: 'action', 
  width: 100, 
  type: 'string',
  hideActionMenu: true,
  cellRenderer: (rowData, dataIndex) => {
    return <div className='text-center'><Button label='#' onClick={() => console.log(rowData, dataIndex)} /></div>
  },
  isHidden: false,
  isFilterEnabled: false,
  resizable: false,
},

Features:

| Key | Description | |---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | title | The display name of the column header ('Action'). This is what users see at the top of the column. | | dataIndex | The field identifier ('action') used to map data from the dataset to this column. | | width | The fixed width of the column (100 pixels). Controls how much horizontal space the column occupies. | | type | The data type of the column ('string'). Helps define how the column data should be interpreted or rendered. | | hideActionMenu | Boolean (true). Hides the default action menu (like sorting, filtering, etc.) for this column. | | cellRenderer | A custom rendering function. In this case, it renders a centered <Button> with label '#' that logs rowData and dataIndex when clicked. | | isHidden | Boolean (false). Determines whether the column is visible. If set to true, the column will not be shown in the grid. | | isFilterEnabled | Boolean (false). Controls whether filtering is enabled for this column. Here, filtering is disabled. | | resizable | Boolean (false). Indicates whether the column width can be resized by the user. |

Server Side Rendering

const ServerSideRender = () => {
  const columns: MsTableHeaderCellTypes[] = [
    { title: 'Id', dataIndex: 'id', width: 80},
    { title: 'Name', dataIndex: 'title', width: 100, isFilterEnabled: true },
    { title: 'Slug', dataIndex: 'slug', width: 100, isFilterEnabled: true },
    { title: 'price', dataIndex: 'price', type:'number', isFilterEnabled: true },
    { title: 'description', dataIndex: 'description', width: 300, isFilterEnabled: true },
    { title: 'category', dataIndex: 'category', width: 100, type:'object' },
    { title: 'creationAt', dataIndex: 'creationAt', width: 300, isFilterEnabled: true, type: 'date' },
    { title: 'updatedAt', dataIndex: 'updatedAt', width: 150 },
    { title: 'Created Date', dataIndex: 'createdDate', width: 150, isFilterEnabled: true, type: 'date' },
  ]
  
  const gridRef = useRef<GridFunctions>(null!)
  const [isLoading, setLoading]=useState(false)

  const setRowData = (pageNo:number, pageSize:number, filters:filterValuesType, sortBy:{key:string, sortBy?: sortDirection}) => { 
    setLoading(true)   

    // Your API call logic goes here
    // ...

    gridRef?.current?.setRowData?.(users.data, users.total);

    // Note: setRowData function of gridRef will set the data to the table and total records for pagination
    
    setLoading(false)

  }


  return (
    <>
      <MsReactTable
        ref={gridRef}
        isClientSideRendering={false}
        columns={columns}        
        hideDefaultFilterButton={true}
        height="calc(100vh - 200px)"
        customComponentForNoRecords={<div>Custom Messaage will show here</div>}
        setRowData={setRowData}
        isLoading={isLoading}
      />
    </>
  )
}

Note:

• isClientSideRendering={false} This must be false, if you are using dynamic data
• setRowData Function will trigger on page ready and every event of pagination

License