Custom Filters On Ninja Tables

IDFirst NameLast NameGenderStatusSomethingJob TitleStarteddob
216LondaLandaActive1386157959026Union Representative1362642712905552247011078
217UshaMcgaughyActive1321944069062Clown1369462379974529809122894
218BarDauenhauerActive1353783118443Animal Husbandry Manager1365205217472417092362006
219AlonzoHiblerDisabled1354119586358Garment Presser1308615688145586727260932
220BernieLusherSuspended1339548554855Technical Services Librarian1296267530398724811561196
221KaciPiermariniActive1297770274752Parachute Officer1383193170158-150050014006
222DoyQuarantaMaleSuspended1306398831701Financial Accountant1269673822143224795675607
223JackSmelcerFemaleDisabled1302545451877Electrical Lineworker1376411765035-32213774856
224KaciMcgaughyMaleDisabled1370330176761Obstetrician/Gynecologist1381285068012517981759154
225MarquiaStgelaisOtherSuspended1372201580967Jig Bore Tool Maker1279201900686230456999570
226LilianWeickFemaleSuspended1304992981746Jig Bore Tool Maker1358847348073279066672559
227RigoberoHaytonMaleActive1300843590966Potato Sorter1287420292854255932781273
228LashandaLewisFemaleActive1359252707364Internal Medicine Nurse Practitioner1282006288877-137951349676
229MariaBrancoFemaleDisabled1354464828631National Association for Stock Car Auto Racing Driver1383678560426135428306839
230DoyHeinenMaleSuspended1318568556732Appliance Parts Counter Clerk1378533012170349165812263
231CharlesDragooMaleActive1338521162832Post-Anesthesia Care Unit Nurse1328030460710695678645664
232WhineyLettsMaleSuspended1316789505859Industrial Waste Treatment Technician1361155745237163002113443
233DollyKlotzFemaleActive1379773423450Broadcast Maintenance Engineer1362581729932-208621934411
234CharlesMosherMaleSuspended1353240754187Wood Fence Installer1386788689672569661691835
235RivkaVanattaFemaleDisabled1388323017026Fresco Artist1324396225964710805723804
236NeieRolingMaleActive1329472838847Work Ticket Distributor1346536614530-97817565734
237IldaGaffneyFemaleActive1266628196387Body Shop Supervisor133654617728682809199060
238LondaHanMaleActive1312819287932Jig Bore Tool Maker131319779526910445731932
239LorrianeGoodlowOtherActive1373344403796Ventriloquist1328157950535-127567579554
240SolomonVanattaMaleActive1270435412713National Association for Stock Car Auto Racing Driver1316664501131313847055363
241AlonzoSmelcerFemaleActive1290170780753Window Trimmer1264873163036707468689400
242MarlineEdwinMaleSuspended1315243522164Industrial Waste Treatment Technician1380626992685318443799490
243AnoninaSprouseFemaleActive1339408292033Auto Detailer1275615866100-75546618635
244JasonNicleyMaleSuspended1363438447485High School History Teacher1262756571590304963260964
245BearizHeinenMaleSuspended1349631125504Calculus Professor1347394589636503176920963
246CharlesLanFemaleSuspended1275094762585Telephone Lines Repairer1342259870326424026993561
247ArdeliaGuilfordFemaleActive1362010981695Accounts Collector1303285744232405074865931
248LauriBrueningMaleSuspended1365714090829Childcare Center Administrator1350608490349654537730005
249MaireWeiszMaleDisabled1370812599489Ships Electronic Warfare Officer1369088227045155969085768
250MaireSprouseFemaleSuspended1310845133103Fashion Designer1344939228249-13797279713
251MyeshaLafromboiseFemaleActive1269674379736Emergency Room Orderly1311526766377709115269485
252LilianLeinenMaleSuspended1263487597270Business Services Sales Representative1362394899494-17550966933
253NikiaSinclairOtherSuspended1314565431744Accounts Collector1267795957008393404572584
254SephnieGaffneyMaleSuspended1280745820418Jig Bore Tool Maker1377539314339279598258588
255AlonzoHogleFemaleActive1290556729686Window Trimmer1278246083138-225681928604
256RaynaLewisFemaleDisabled1374544616486Fresco Artist1346749882194707652136097
257CharlesStgelaisMaleSuspended1365206639170Pulpwood Cutter1388398424996326018111253
258ConsueloKygerMaleDisabled1265853747559Wood Fence Installer1383233664297715984956593
259JacqulynCarascoMaleSuspended1346478248352Military Science Teacher130852913484279353918480
260BernieStgelaisMaleDisabled1302838350016Cloak Room Attendant1307342600018-210506174793
261GwenLettsMaleSuspended1353683300825Language Translator1348312220742601674857640
262JacqulynStgelaisOtherDisabled1381040907787Route Sales Person1329435512278406344201763
263MarquiaHalladayFemaleActive1270224639786Auto Detailer1385154491123-241127531255
264VeniceQuarantaFemaleDisabled1383038442545Internet Marketing Manager1369721140275559117300270
265JacqulynLeisterMaleSuspended1288960916845National Association for Stock Car Auto Racing Driver1380291162510508419425603

The above table example was created by Ninja Tables Pro. You can click the boxes and notice the changes in the table. In this guide, you’ll learn how to correctly use Custom filters to your tables. Ninja Tables offers you a powerful feature known as Custom Filters, which lets users filter data from tables in various ways.

Go to the NinjaTables dashboard, to enable custom filters on your table. Then go to the Edit button of your preferred table. You can see the button when you hover your cursor on the title of the table.

Next, a Table Configurations tab will appear along with the other tabs.

Clicking the Configuration tab,  you will find a new window appear with the Custom Filters option on the sidebar. See in the example below:

Click on the Custom Filters, there a new tab will open with an Add New Filter button.

Click the button, then a pop-up form with a set of configuration options will open. Here’s the Pop-up Form screenshot:

This pop-up has a variety of options to choose from, to make your table’s filter more interactive. The following options can be found in the custom filter pop-up form:

→ Filter Title: This field of input is for the filter title which determines what the filter name will be.

Filter Label: This input field is used if you want to add a label to your filter. Keep it blank if you don’t need any filter instruction in the frontend.

Filter UI Type: You can choose the type of filter to display the base of the filter in the frontend. There are eight subsets in the Filter UI type. Such as- a) Select Dropdown b) Radio c) Checkbox d) Date Picker e) Date Range f) Text Input g) Number Range h) Reset Filter Button 

→ Default Label (placeholder): To reset the table, the default placeholder is All. But if you want to change the text you can do it by typing in your desired text.

Filter Options: This lets you place the value through which the filter will be implemented. Put your desired values to display it on the frontend, be aware that those values need to match your cell data on that table. Filter options feature three sequential fields called Label, Filter Value, and Action Button

  • The label of the filtered value is entered in the Label field.
  • Put the value that you want to get filtered in the Filter Value field.
  • There are 2 action buttons to add and delete in each of the Label and Filter Value fields.

Filter Columns: This option is to pick the columns you wish to apply the filter. You can choose any single columns, or you can pick multiple columns.→ Strict Mode: Enable this mode if you want the results to be accurately matching the values.

Some Advance feature of Custom filter

You are going to get a few amazing features after the release of Ninja Tables 3.4.1 version. And Select Range Filter is one of them.

If you have a table like this with a column numeric column and you would like to include the option to filter by selecting the range, then you can quickly do it like this:

NameAge
Jane12
John20
Doe5
Rane14
Abrah7
Rone32
Simon21

Simply set the filter value to this:

  • For less than {lt} yourValue
  • For greater than {gt} yourValue
  • Between two value ~firstValue: lastValue

That is how you can use the Ninja Tables to create and add a custom filter on your table in different ways.

Upgrade to Ninja Tables Pro
Upgrade to Ninja Tables Pro and make your tables more powerful

Was this article helpful to you?

30 31

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket